loto/app/globals.css

@import "tailwindcss";

:root {
  --background: #f8fafc;
  --foreground: #1e293b;
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0f172a;
    --foreground: #e2e8f0;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
}

/* Equal-width grid cells */
.loto-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
}

.master-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
}

/* Congratulations popup animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop-in {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-12px); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-in { animation: fade-in 0.2s ease-out; }
.animate-pop-in { animation: pop-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-bounce-slow { animation: bounce-slow 1.5s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 3s linear infinite; }
.animate-spin-slow-reverse { animation: spin-slow 3s linear infinite reverse; }

@keyframes toast {
  0% { opacity: 0; transform: scale(0.8); }
  10% { opacity: 1; transform: scale(1.05); }
  15% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.animate-toast { animation: toast 5s ease-in-out forwards; }

/* Crossed cell diagonal line */
.cell-crossed::after {
  content: "";
  position: absolute;
  inset: 6px;
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 1.5px),
    #ef4444,
    transparent calc(50% + 1.5px)
  );
  pointer-events: none;
}