/* शुद्ध हिंदी फॉन्ट: लव बर्ड टैरो मुख्य स्टाइलशीट */

:root {
    --theme-color: #FFD700; 
    --card-glow: 0 0 20px rgba(255, 215, 0, 0.3);
    --app-font: 'Cinzel', serif; 
}

body {
    margin: 0; padding: 0;
    background-size: cover; background-position: center;
    background-attachment: fixed; color: white;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    transition: background 0.8s ease;
    user-select: none;
}

/* 🌊 वाटर रिपल और कर्सर इफेक्ट */
.ripple {
    position: fixed;
    border: 4px solid var(--theme-color);
    background: radial-gradient(circle, transparent 40%, rgba(255, 215, 0, 0.1) 100%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: water-ripple 1.2s cubic-bezier(0, 0.5, 0.5, 1) forwards;
    z-index: 99999;
}

@keyframes water-ripple {
    from { width: 0; height: 0; opacity: 1; border-width: 8px; }
    to { width: 400px; height: 400px; opacity: 0; border-width: 1px; }
}

.water-drop {
    position: fixed; width: 15px; height: 15px;
    border: 1px solid var(--theme-color); border-radius: 50%;
    pointer-events: none; z-index: 99998; opacity: 0.5;
    transform: translate(-50%, -50%);
}

#butterfly { position: fixed; width: 70px; z-index: 9999; mix-blend-mode: screen; pointer-events: auto; }

/* UI Panels */
#settingsPanel {
    position: fixed; top: 75px; right: -180px; width: 180px;
    background: rgba(0,0,0,0.92); border: 2px solid var(--theme-color);
    padding: 20px; z-index: 3000; border-radius: 15px; 
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.setting-item { cursor: pointer; margin-bottom: 15px; font-size: 14px; color: var(--theme-color); font-family: var(--app-font); border-bottom: 1px solid #444; padding-bottom: 8px; }

/* Logo & Layout */
.logo-area { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 100px; cursor: pointer; }
.main-logo { width: 90px; filter: drop-shadow(0 0 10px var(--theme-color)); }
.app-name { font-family: var(--app-font); font-size: 28px; color: var(--theme-color); font-weight: bold; margin-top: 10px; }

.readings-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; padding-bottom: 150px; }

@media (min-width: 768px) { .readings-container { grid-template-columns: repeat(3, 1fr); } }

/* Reading Cards */
.reading-card {
    background: rgba(0, 0, 0, 0.4); border: 1.5px solid var(--theme-color); 
    border-radius: 15px; aspect-ratio: 2 / 3; display: flex; flex-direction: column; 
    justify-content: flex-end; align-items: center; overflow: hidden; 
    position: relative; cursor: pointer; box-shadow: var(--card-glow); 
    /* Zoom transition effects.js se GSAP control karega */
}

.reading-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0.7; }
.reading-card p { position: relative; z-index: 2; margin: 0; font-size: 14px; font-weight: bold; background: rgba(0, 0, 0, 0.8); width: 100%; padding: 10px 0; text-align: center; color: var(--theme-color); font-family: var(--app-font); }

/* Bottom Bar */
.bottom-music-bar { position: fixed; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: space-around; padding: 12px 0; border-top: 2px solid var(--theme-color); z-index: 2000; }
.music-item { text-align: center; color: var(--theme-color); font-size: 11px; cursor: pointer; }
.music-item img { width: 26px; filter: drop-shadow(0 0 5px var(--theme-color)); }

#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2500; display: none; }