/* =============================================================
   FunGame — Frontend (Public) Custom Styles
   Covers: home, challenge, quiz, result pages
   ============================================================= */

/* ----- Result page: half-circle gauge container ----- */
.gauge-container {
    max-width: 280px;
    height: 165px;
}

.gauge-container .absolute.inset-x-0 {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* =============================================================
   Greeting Card Animations
   ============================================================= */

/* 9:16 story / status card */
.greeting-card-916 {
    width: 390px;
    height: 844px;
}

/* 1:1 square post card */
.greeting-card-11 {
    width: 414px;
    height: 414px;
}

/* Hidden high-res export frame — positioned off-screen */
#export-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    overflow: hidden;
}

/* Hearts theme: heartbeat pulse */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}
.animate-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* New Year: text reveal slide-up */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.animate-slide-up {
    animation: slideUp 1s ease-out forwards;
}

/* Festive / generic: animated gradient background */
@keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

/* Eid: gold glow sparkle on name text */
@keyframes goldSparkle {
    0%, 100% { text-shadow: 0 0 4px #D97706; }
    50%       { text-shadow: 0 0 16px #D97706, 0 0 30px #FBBF24; }
}
.animate-gold-sparkle {
    animation: goldSparkle 2s ease-in-out infinite;
}

/* Flash overlay for firework pop */
@keyframes flashFade {
    0%   { opacity: 0.6; }
    100% { opacity: 0; }
}
.animate-flash {
    animation: flashFade 0.5s ease-out forwards;
    pointer-events: none;
}