:root {
  --background: 248 42% 8%;
  --foreground: 35 100% 96%;
  --primary: 37 97% 62%;
  --secondary: 330 88% 67%;
  --muted: 244 24% 18%;
  --muted-foreground: 30 28% 78%;
  --destructive: 0 78% 62%;
  --border: 34 68% 69%;
  --card: 244 34% 14%;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.34);
  --transition-fast: 180ms ease;
  --transition-smooth: 380ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 248 42% 8%;
  --foreground: 35 100% 96%;
  --primary: 37 97% 62%;
  --secondary: 330 88% 67%;
  --muted: 244 24% 18%;
  --muted-foreground: 30 28% 78%;
  --destructive: 0 78% 62%;
  --border: 34 68% 69%;
  --card: 244 34% 14%;
}

html:not(.dark) {
  --background: 34 100% 97%;
  --foreground: 252 35% 14%;
  --primary: 26 96% 50%;
  --secondary: 334 82% 58%;
  --muted: 30 40% 92%;
  --muted-foreground: 248 18% 34%;
  --destructive: 0 72% 52%;
  --border: 28 50% 72%;
  --card: 0 0% 100%;
}

* {
  box-sizing: border-box;
}

html, body, #root {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top, hsla(35, 100%, 68%, 0.1), transparent 25%),
    radial-gradient(circle at 80% 20%, hsla(330, 88%, 67%, 0.12), transparent 22%),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.aurora-mask {
  background:
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 20%), hsla(35, 100%, 68%, 0.13), transparent 18%),
    radial-gradient(circle at 20% 90%, hsla(330, 88%, 67%, 0.08), transparent 18%);
}

.glass-panel,
.glass-subpanel {
  background: linear-gradient(180deg, hsla(var(--card), 0.62), hsla(var(--card), 0.46));
  border: 1px solid hsla(var(--border), 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.glass-subpanel {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.festive-border::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, hsla(35, 100%, 70%, 0.5), hsla(330, 88%, 70%, 0.26), transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.token-pill,
.floating-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid hsla(var(--primary), 0.24);
  background: hsla(var(--primary), 0.12);
  color: hsl(var(--primary));
  padding: 0.35rem 0.7rem;
  font-size: 0.74rem;
  line-height: 1;
}

.floating-chip {
  animation: floaty 5.2s ease-in-out infinite;
}

.icon-button,
.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 999px;
  border: 1px solid hsla(var(--border), 0.2);
  padding: 0.8rem 1rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}

.icon-button {
  background: hsla(var(--card), 0.58);
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
}

.app-button.primary {
  background: linear-gradient(135deg, hsla(var(--primary), 0.92), hsla(var(--secondary), 0.78));
  color: white;
  box-shadow: var(--shadow-md);
}

.app-button.secondary {
  background: hsla(var(--card), 0.68);
  color: hsl(var(--foreground));
}

.icon-button:hover,
.app-button:hover,
.mode-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.app-input,
.app-textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsla(var(--border), 0.22);
  background: hsla(var(--card), 0.56);
  color: hsl(var(--foreground));
  padding: 0.9rem 1rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.app-input::placeholder,
.app-textarea::placeholder {
  color: hsla(var(--muted-foreground), 0.8);
}

.app-input:focus,
.app-textarea:focus {
  border-color: hsla(var(--primary), 0.55);
  box-shadow: 0 0 0 4px hsla(var(--primary), 0.12);
}

.card-stage {
  perspective: 1400px;
}

.greeting-card {
  position: relative;
  width: 100%;
  min-height: 340px;
  border: none;
  background: transparent;
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth);
  cursor: pointer;
}

.greeting-card:hover {
  transform: rotateY(-10deg) rotateX(7deg) scale(1.01);
}

.greeting-card.open {
  transform: rotateY(180deg);
}

.greeting-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: calc(var(--radius-lg) - 2px);
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid hsla(var(--border), 0.22);
  box-shadow: var(--shadow-lg);
}

.greeting-card-front {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 18%, hsla(35, 100%, 68%, 0.16), transparent 22%),
    radial-gradient(circle at 80% 20%, hsla(330, 88%, 67%, 0.16), transparent 18%),
    linear-gradient(160deg, hsla(var(--card), 0.98), hsla(258, 35%, 10%, 0.96));
}

.greeting-card-inner {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at top right, hsla(35, 100%, 68%, 0.12), transparent 26%),
    linear-gradient(160deg, hsla(var(--card), 0.95), hsla(328, 35%, 12%, 0.92));
}

.card-shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 32%, hsla(35, 100%, 84%, 0.18), transparent 58%);
  transform: rotate(12deg);
  animation: shine 4.8s linear infinite;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.28), transparent);
  animation: shimmer 1.4s linear infinite;
}

.village-bg {
  background:
    linear-gradient(180deg, hsla(35, 100%, 70%, 0.18), transparent 40%),
    linear-gradient(to top, hsla(248, 55%, 6%, 0.85) 0 28%, transparent 28%);
}

.sun-orb {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  background: radial-gradient(circle, hsla(45, 100%, 75%, 0.98), hsla(29, 100%, 62%, 0.52) 60%, transparent 70%);
  box-shadow: 0 0 42px hsla(40, 100%, 68%, 0.5);
  animation: pulseSun 4s ease-in-out infinite;
}

.temple-silhouette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3rem;
  height: 5rem;
  background: linear-gradient(to top, hsla(248, 55%, 6%, 0.95), hsla(248, 55%, 6%, 0.95));
  clip-path: polygon(0% 100%, 0% 82%, 10% 82%, 13% 45%, 16% 82%, 20% 82%, 24% 56%, 28% 82%, 32% 82%, 35% 52%, 38% 82%, 100% 82%, 100% 100%);
}

.kolam-grid {
  position: absolute;
  left: 50%;
  bottom: 4.75rem;
  width: 7rem;
  height: 7rem;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0.78;
  background:
    radial-gradient(circle at center, transparent 34%, hsla(35, 100%, 80%, 0.24) 36%, transparent 40%),
    conic-gradient(from 0deg, hsla(35, 100%, 80%, 0.35), transparent, hsla(330, 88%, 72%, 0.35), transparent, hsla(35, 100%, 80%, 0.35));
  filter: drop-shadow(0 0 14px hsla(35, 100%, 70%, 0.25));
  animation: spinSlow 18s linear infinite;
}

.letters-cloud {
  position: absolute;
  inset: 0;
}

.tamil-letter {
  position: absolute;
  font-weight: 700;
  color: hsla(42, 100%, 78%, 0.85);
  text-shadow: 0 0 20px hsla(35, 100%, 70%, 0.45);
  animation: drift 7s ease-in-out infinite;
}

.tamil-letter-1 { top: 18%; left: 58%; font-size: 1.5rem; animation-delay: 0s; }
.tamil-letter-2 { top: 24%; left: 70%; font-size: 1.1rem; animation-delay: 0.8s; }
.tamil-letter-3 { top: 14%; left: 82%; font-size: 1.3rem; animation-delay: 1.4s; }
.tamil-letter-4 { top: 36%; left: 64%; font-size: 1.2rem; animation-delay: 1.8s; }
.tamil-letter-5 { top: 12%; left: 42%; font-size: 1rem; animation-delay: 2.3s; }
.tamil-letter-6 { top: 42%; left: 80%; font-size: 1.2rem; animation-delay: 2.8s; }
.tamil-letter-7 { top: 30%; left: 50%; font-size: 1.4rem; animation-delay: 3.3s; }

.mode-card {
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid hsla(var(--border), 0.16);
  background: hsla(var(--card), 0.48);
  padding: 0.95rem;
  transition: all var(--transition-fast);
}

.mode-card-active {
  background: hsla(var(--primary), 0.14);
  border-color: hsla(var(--primary), 0.3);
  box-shadow: var(--shadow-sm);
}

.mini-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid hsla(var(--border), 0.16);
  background: hsla(var(--card), 0.42);
}

.mini-stat span {
  font-size: 1.25rem;
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(8deg); }
}

@keyframes pulseSun {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes spinSlow {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

@keyframes shine {
  0% { transform: translateX(-50%) rotate(12deg); }
  100% { transform: translateX(50%) rotate(12deg); }
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

@media (max-width: 640px) {
  .greeting-card {
    min-height: 320px;
  }
}