/* Theme Variables */
:root[data-theme="default"] {
    --bg-color: #FFFDF5;
    --text-color: #2D3748;
    --border-color: #2D3748;
    --primary: #6EE7B7;
    --primary-dark: #059669;
    --secondary: #FDE68A;
    --secondary-dark: #D97706;
    --accent: #FBCFE8;
    --accent-dark: #DB2777;
    --blue-soft: #BAE6FD;
    --blue-dark: #0284C7;
    --missing-bg: #F3F4F6;
    --missing-border: #CBD5E1;
    --input-bg: #FFFFFF;
    --shadow-color: #2D3748;
}

:root[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #E5E7EB;
    --border-color: #4B5563;
    --primary: #34D399;
    --primary-dark: #10B981;
    --secondary: #FBBF24;
    --secondary-dark: #F59E0B;
    --accent: #F472B6;
    --accent-dark: #EC4899;
    --blue-soft: #3B82F6;
    --blue-dark: #60A5FA;
    --missing-bg: #374151;
    --missing-border: #6B7280;
    --input-bg: #374151;
    --shadow-color: #000000;
}

:root[data-theme="ocean"] {
    --bg-color: #EFF6FF;
    --text-color: #1E3A8A;
    --border-color: #1E3A8A;
    --primary: #60A5FA;
    --primary-dark: #3B82F6;
    --secondary: #93C5FD;
    --secondary-dark: #2563EB;
    --accent: #DBEAFE;
    --accent-dark: #1D4ED8;
    --blue-soft: #BFDBFE;
    --blue-dark: #1E40AF;
    --missing-bg: #F3F4F6;
    --missing-border: #93C5FD;
    --input-bg: #FFFFFF;
    --shadow-color: #1E3A8A;
}

:root[data-theme="forest"] {
    --bg-color: #F0FDF4;
    --text-color: #14532D;
    --border-color: #14532D;
    --primary: #86EFAC;
    --primary-dark: #22C55E;
    --secondary: #FDE047;
    --secondary-dark: #EAB308;
    --accent: #BBF7D0;
    --accent-dark: #16A34A;
    --blue-soft: #D1FAE5;
    --blue-dark: #059669;
    --missing-bg: #F3F4F6;
    --missing-border: #BBF7D0;
    --input-bg: #FFFFFF;
    --shadow-color: #14532D;
}

:root[data-theme="sunset"] {
    --bg-color: #FFF7ED;
    --text-color: #7C2D12;
    --border-color: #7C2D12;
    --primary: #FDBA74;
    --primary-dark: #F97316;
    --secondary: #FEF08A;
    --secondary-dark: #EAB308;
    --accent: #FECACA;
    --accent-dark: #DC2626;
    --blue-soft: #FED7AA;
    --blue-dark: #EA580C;
    --missing-bg: #F3F4F6;
    --missing-border: #FED7AA;
    --input-bg: #FFFFFF;
    --shadow-color: #7C2D12;
}

:root[data-theme="purple"] {
    --bg-color: #FAF5FF;
    --text-color: #581C87;
    --border-color: #581C87;
    --primary: #D8B4FE;
    --primary-dark: #A855F7;
    --secondary: #FDE047;
    --secondary-dark: #EAB308;
    --accent: #F3E8FF;
    --accent-dark: #9333EA;
    --blue-soft: #E9D5FF;
    --blue-dark: #7C3AED;
    --missing-bg: #F3F4F6;
    --missing-border: #E9D5FF;
    --input-bg: #FFFFFF;
    --shadow-color: #581C87;
}

/* Smooth theme transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Animations */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Dancing animation - playful bounce with rotation and scaling */
@keyframes dance {
    0% { transform: translateY(0) rotate(var(--base-rotation)) scale(1); }
    15% { transform: translateY(-8px) rotate(calc(var(--base-rotation) + 3deg)) scale(1.02); }
    30% { transform: translateY(0) rotate(calc(var(--base-rotation) - 2deg)) scale(1.03); }
    45% { transform: translateY(-6px) rotate(calc(var(--base-rotation) + 2deg)) scale(1.01); }
    60% { transform: translateY(0) rotate(calc(var(--base-rotation) - 3deg)) scale(1.025); }
    75% { transform: translateY(-4px) rotate(calc(var(--base-rotation) + 1deg)) scale(1.02); }
    90% { transform: translateY(0) rotate(calc(var(--base-rotation) - 1deg)) scale(1.01); }
    100% { transform: translateY(0) rotate(var(--base-rotation)) scale(1); }
}

.number-btn.selected {
    animation: dance 3s ease-in-out infinite;
    box-shadow: 0 0 0 3px var(--primary) !important;
}

.stat {
    animation: slideUp 0.4s ease;
}

.toast {
    animation: slideUp 0.3s ease;
}

.controls.open {
    animation: slideUp 0.3s ease;
}

/* Confetti effect when completing album */
@keyframes confetti {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    background: var(--primary);
    top: -10px;
    z-index: 9999;
    animation: confetti 3s ease-out forwards;
}