@import 'tailwindcss';

@source not "./daisyui{,*}.mjs";
@plugin "./daisyui.mjs";
@plugin "./daisyui-theme.mjs" {
  name: "connect4";
  default: true;
  color-scheme: light;

  /* Playful & bright — warm, casual board game feel */
  --color-base-100: oklch(98% 0.005 90);       /* warm white */
  --color-base-200: oklch(95% 0.01 90);        /* light cream */
  --color-base-300: oklch(90% 0.015 85);       /* warm gray border */
  --color-base-content: oklch(25% 0.02 50);    /* dark warm text */

  --color-primary: oklch(60% 0.22 30);         /* warm red — matches game pieces */
  --color-primary-content: oklch(98% 0.005 90);
  --color-secondary: oklch(82% 0.17 85);       /* golden yellow — matches game pieces */
  --color-secondary-content: oklch(25% 0.02 50);
  --color-accent: oklch(65% 0.19 250);         /* board blue */
  --color-accent-content: oklch(98% 0.005 90);
  --color-neutral: oklch(35% 0.03 260);
  --color-neutral-content: oklch(95% 0.01 90);

  --color-success: oklch(72% 0.19 155);
  --color-success-content: oklch(20% 0.04 155);
  --color-warning: oklch(82% 0.17 85);
  --color-warning-content: oklch(25% 0.04 85);
  --color-error: oklch(60% 0.22 30);
  --color-error-content: oklch(97% 0.01 30);
  --color-info: oklch(70% 0.15 240);
  --color-info-content: oklch(20% 0.04 240);

  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
};

/* Game-specific styles that can't be Tailwind utilities */
.board {
  display: flex;
  gap: 8px;
  background: #2563eb;
  padding: 16px;
  border-radius: 12px;
}
.column { display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 8px; }
.column.clickable { cursor: pointer; }
.column.clickable:hover { background: rgba(255,255,255,0.15); }
.cell { width: 48px; height: 48px; border-radius: 50%; background: #1e40af; transition: background 0.2s; }
.cell.red { background: #dc2626; }
.cell.yellow { background: #facc15; }
.cell.winning { animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes pulse {
  from { transform: scale(1); box-shadow: 0 0 10px rgba(255,255,255,0.5); }
  to { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,0.8); }
}
.player-chip { width: 20px; height: 20px; border-radius: 50%; background: #666; }
.player-chip.red { background: #dc2626; }
.player-chip.yellow { background: #facc15; }