/* General Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Prevent text selection when tapping quickly */
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* SVG Progress Ring Styles */
.progress-ring {
    width: 240px;
    height: 240px;
    position: relative;
    /* Rotate -90deg so the stroke starts at the top (12 o'clock) */
    transform: rotate(-90deg);
}
.progress-ring-bg {
    fill: transparent;
    stroke: #ffedd5; /* Tailwind orange-50 */
    stroke-width: 12;
}
.progress-ring-fill {
    fill: transparent;
    stroke: #ea580c; /* Tailwind saffron (orange-600) */
    stroke-width: 12;
    stroke-linecap: round;
    /* The dasharray and offset will be controlled by JS.
       Circumference = 2 * PI * r = 2 * 3.14159 * 110 = 691.15 */
    stroke-dasharray: 691.15;
    stroke-dashoffset: 691.15;
    transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Celebration Animations */
@keyframes goldPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); /* gold */
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 30px rgba(251, 191, 36, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
        transform: scale(1);
    }
}
.animate-gold-pulse {
    animation: goldPulse 0.8s ease-out;
}
/* Subtitle pulse for 108 */
@keyframes textGlow {
    0% { text-shadow: 0 0 0px #fbbf24; color: #ea580c; }
    50% { text-shadow: 0 0 15px #fbbf24; color: #fbbf24; }
    100% { text-shadow: 0 0 0px #fbbf24; color: #ea580c; }
}
.animate-text-glow {
    animation: textGlow 1s ease-out;
}