/* ==========================================================================
   Bingo Themes & Stamp Design System
   ========================================================================== */

/* 1. Modern Clean (Default) */
.theme-modern {
  --board-bg-primary: #f8fafc;
  --board-bg-card: #ffffff;
  --board-bg-card-hover: #f1f5f9;
  --board-bg-card-marked: #eff6ff;
  --board-border-card: #e2e8f0;
  --board-border-subtle: #cbd5e1;
  --board-text-main: #0f172a;
  --board-text-muted: #64748b;
  --board-accent-color: #2563eb;
  --board-card-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --board-tile-shadow: 0 1px 3px rgba(0,0,0,0.05);
  --board-font-heading: 'Outfit', sans-serif;
  --board-font-body: 'Inter', sans-serif;
  --board-radius-sm: 8px;
  --board-radius-md: 14px;
  --board-radius-lg: 20px;

  /* Legacy aliases for backwards compatibility within board elements */
  --bg-card: var(--board-bg-card);
  --bg-card-hover: var(--board-bg-card-hover);
  --bg-card-marked: var(--board-bg-card-marked);
  --border-card: var(--board-border-card);
  --border-subtle: var(--board-border-subtle);
  --card-shadow: var(--board-card-shadow);
  --tile-shadow: var(--board-tile-shadow);
  --font-heading: var(--board-font-heading);
  --font-body: var(--board-font-body);
}

/* 2. Warm Editorial Paper */
.theme-warm-paper {
  --board-bg-primary: #fbf7ee;
  --board-bg-card: #fffdf9;
  --board-bg-card-hover: #f5eedc;
  --board-bg-card-marked: #fef3c7;
  --board-border-card: #e7dcce;
  --board-border-subtle: #d6c5b0;
  --board-text-main: #292524;
  --board-text-muted: #78716c;
  --board-accent-color: #c2410c;
  --board-card-shadow: 0 12px 28px -6px rgba(68, 64, 60, 0.08), 0 4px 12px -2px rgba(68, 64, 60, 0.05);
  --board-tile-shadow: 0 2px 4px rgba(68,64,60,0.06);
  --board-font-heading: 'Playfair Display', Georgia, serif;
  --board-font-body: 'Inter', Georgia, serif;
  --board-radius-sm: 4px;
  --board-radius-md: 8px;
  --board-radius-lg: 12px;

  --bg-card: var(--board-bg-card);
  --bg-card-hover: var(--board-bg-card-hover);
  --bg-card-marked: var(--board-bg-card-marked);
  --border-card: var(--board-border-card);
  --border-subtle: var(--board-border-subtle);
  --card-shadow: var(--board-card-shadow);
  --tile-shadow: var(--board-tile-shadow);
  --font-heading: var(--board-font-heading);
  --font-body: var(--board-font-body);
}

/* 3. Retro Diner & Arcade */
.theme-retro {
  --board-bg-primary: #fff8f0;
  --board-bg-card: #ffffff;
  --board-bg-card-hover: #fef0e2;
  --board-bg-card-marked: #ffe4e6;
  --board-border-card: #fecdd3;
  --board-border-subtle: #fda4af;
  --board-text-main: #1c1917;
  --board-text-muted: #78716c;
  --board-accent-color: #e11d48;
  --board-card-shadow: 0 12px 30px -4px rgba(225, 29, 72, 0.1), 0 6px 14px -2px rgba(0, 0, 0, 0.04);
  --board-tile-shadow: 0 3px 6px rgba(0,0,0,0.07);
  --board-font-heading: 'Outfit', sans-serif;
  --board-font-body: 'Inter', sans-serif;
  --board-radius-sm: 10px;
  --board-radius-md: 18px;
  --board-radius-lg: 24px;

  --bg-card: var(--board-bg-card);
  --bg-card-hover: var(--board-bg-card-hover);
  --bg-card-marked: var(--board-bg-card-marked);
  --border-card: var(--board-border-card);
  --border-subtle: var(--board-border-subtle);
  --card-shadow: var(--board-card-shadow);
  --tile-shadow: var(--board-tile-shadow);
  --font-heading: var(--board-font-heading);
  --font-body: var(--board-font-body);
}

/* 4. Midnight Slate */
.theme-midnight {
  --board-bg-primary: #0f172a;
  --board-bg-card: #1e293b;
  --board-bg-card-hover: #334155;
  --board-bg-card-marked: #134e4a;
  --board-border-card: #334155;
  --board-border-subtle: #475569;
  --board-text-main: #f8fafc;
  --board-text-muted: #94a3b8;
  --board-accent-color: #14b8a6;
  --board-card-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.5);
  --board-tile-shadow: 0 2px 5px rgba(0,0,0,0.3);
  --board-font-heading: 'Outfit', sans-serif;
  --board-font-body: 'Inter', sans-serif;
  --board-radius-sm: 8px;
  --board-radius-md: 14px;
  --board-radius-lg: 20px;

  --bg-card: var(--board-bg-card);
  --bg-card-hover: var(--board-bg-card-hover);
  --bg-card-marked: var(--board-bg-card-marked);
  --border-card: var(--board-border-card);
  --border-subtle: var(--board-border-subtle);
  --card-shadow: var(--board-card-shadow);
  --tile-shadow: var(--board-tile-shadow);
  --font-heading: var(--board-font-heading);
  --font-body: var(--board-font-body);
}

/* 5. Pastel Playful */
.theme-pastel {
  --board-bg-primary: #f0fdf4;
  --board-bg-card: #ffffff;
  --board-bg-card-hover: #fdf2f8;
  --board-bg-card-marked: #fce7f3;
  --board-border-card: #e2e8f0;
  --board-border-subtle: #fbcfe8;
  --board-text-main: #1e293b;
  --board-text-muted: #64748b;
  --board-accent-color: #db2777;
  --board-card-shadow: 0 14px 28px -6px rgba(219, 39, 119, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
  --board-tile-shadow: 0 2px 4px rgba(0,0,0,0.04);
  --board-font-heading: 'Outfit', sans-serif;
  --board-font-body: 'Inter', sans-serif;
  --board-radius-sm: 12px;
  --board-radius-md: 20px;
  --board-radius-lg: 28px;

  --bg-card: var(--board-bg-card);
  --bg-card-hover: var(--board-bg-card-hover);
  --bg-card-marked: var(--board-bg-card-marked);
  --border-card: var(--board-border-card);
  --border-subtle: var(--board-border-subtle);
  --card-shadow: var(--board-card-shadow);
  --tile-shadow: var(--board-tile-shadow);
  --font-heading: var(--board-font-heading);
  --font-body: var(--board-font-body);
}

/* ==========================================================================
   Stamp / Dabber Styles
   ========================================================================== */

.stamp-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(-15deg);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.bingo-cell.marked .stamp-indicator {
  transform: translate(-50%, -50%) scale(1) rotate(var(--stamp-angle, -6deg));
  opacity: 0.88;
}

/* Classic Dabber Splat */
.stamp-style-splat .stamp-indicator {
  width: 76%;
  height: 76%;
  background: radial-gradient(circle, var(--stamp-color, #2563eb) 0%, rgba(37, 99, 235, 0.8) 55%, transparent 75%);
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.theme-midnight .stamp-style-splat .stamp-indicator {
  mix-blend-mode: screen;
  background: radial-gradient(circle, var(--stamp-color, #14b8a6) 0%, rgba(20, 184, 166, 0.6) 60%, transparent 80%);
}

/* Star Stamp */
.stamp-style-star .stamp-indicator {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stamp-color, #d97706);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* Checkmark Stamp */
.stamp-style-check .stamp-indicator {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--stamp-color, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.stamp-style-check .stamp-indicator::after {
  content: '';
  width: 14px;
  height: 24px;
  border: solid #ffffff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg) translate(-2px, -3px);
}

/* Heart Stamp */
.stamp-style-heart .stamp-indicator {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stamp-style-heart .stamp-indicator::before {
  content: '❤️';
  font-size: 40px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
}