/* === GAMIFIED POPUP STYLES === */
/* Digunakan untuk tampilan pop-up hasil scan yang menyerupai desain game */

.game-overlay {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.8) 0%, rgba(30, 10, 60, 0.95) 100%);
    backdrop-blur: 8px;
}

.game-card-shield {
    /* Background is now set dynamically via JS */
    border: 4px solid #facc15;
    border-radius: 30px 30px 60px 60px; /* Reduced bottom radius to maximize space */
    box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 30px rgba(255,255,255,0.2); /* Stronger shadow */
    position: relative;
    width: 90vw;
    max-width: 1000px;
    min-width: 320px;
    padding-top: 70px; /* More space for larger ribbon */
    padding-bottom: 30px;
}

.game-ribbon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 1100px;
    height: 100px; /* Larger ribbon */
    background-size: 100% 100%; /* Stretch to fill */
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
}

.ribbon-red {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M40 20 L360 20 L380 40 L360 60 L40 60 L20 40 Z' fill='%23e11d48'/%3E%3Cpath d='M40 20 L360 20 L360 30 L40 30 Z' fill='rgba(255,255,255,0.2)'/%3E%3Cpath d='M20 40 L40 60 L40 70 L10 40 Z' fill='%239f1239'/%3E%3Cpath d='M380 40 L360 60 L360 70 L390 40 Z' fill='%239f1239'/%3E%3C/svg%3E");
}

.ribbon-grey {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M40 20 L360 20 L380 40 L360 60 L40 60 L20 40 Z' fill='%2394a3b8'/%3E%3Cpath d='M40 20 L360 20 L360 30 L40 30 Z' fill='rgba(255,255,255,0.2)'/%3E%3Cpath d='M20 40 L40 60 L40 70 L10 40 Z' fill='%23475569'/%3E%3Cpath d='M380 40 L360 60 L360 70 L390 40 Z' fill='%23475569'/%3E%3C/svg%3E");
}

.ribbon-orange {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M40 20 L360 20 L380 40 L360 60 L40 60 L20 40 Z' fill='%23f97316'/%3E%3Cpath d='M40 20 L360 20 L360 30 L40 30 Z' fill='rgba(255,255,255,0.2)'/%3E%3Cpath d='M20 40 L40 60 L40 70 L10 40 Z' fill='%23c2410c'/%3E%3Cpath d='M380 40 L360 60 L360 70 L390 40 Z' fill='%23c2410c'/%3E%3C/svg%3E");
}

.ribbon-blue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M40 20 L360 20 L380 40 L360 60 L40 60 L20 40 Z' fill='%233b82f6'/%3E%3Cpath d='M40 20 L360 20 L360 30 L40 30 Z' fill='rgba(255,255,255,0.2)'/%3E%3Cpath d='M20 40 L40 60 L40 70 L10 40 Z' fill='%231d4ed8'/%3E%3Cpath d='M380 40 L360 60 L360 70 L390 40 Z' fill='%231d4ed8'/%3E%3C/svg%3E");
}

.ribbon-green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M40 20 L360 20 L380 40 L360 60 L40 60 L20 40 Z' fill='%2310b981'/%3E%3Cpath d='M40 20 L360 20 L360 30 L40 30 Z' fill='rgba(255,255,255,0.2)'/%3E%3Cpath d='M20 40 L40 60 L40 70 L10 40 Z' fill='%23047857'/%3E%3Cpath d='M380 40 L360 60 L360 70 L390 40 Z' fill='%23047857'/%3E%3C/svg%3E");
}

.ribbon-purple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M40 20 L360 20 L380 40 L360 60 L40 60 L20 40 Z' fill='%239333ea'/%3E%3Cpath d='M40 20 L360 20 L360 30 L40 30 Z' fill='rgba(255,255,255,0.2)'/%3E%3Cpath d='M20 40 L40 60 L40 70 L10 40 Z' fill='%237e22ce'/%3E%3Cpath d='M380 40 L360 60 L360 70 L390 40 Z' fill='%237e22ce'/%3E%3C/svg%3E");
}

.ribbon-yellow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M40 20 L360 20 L380 40 L360 60 L40 60 L20 40 Z' fill='%23eab308'/%3E%3Cpath d='M40 20 L360 20 L360 30 L40 30 Z' fill='rgba(255,255,255,0.2)'/%3E%3Cpath d='M20 40 L40 60 L40 70 L10 40 Z' fill='%23ca8a04'/%3E%3Cpath d='M380 40 L360 60 L360 70 L390 40 Z' fill='%23ca8a04'/%3E%3C/svg%3E");
}

.game-ribbon-text {
    font-family: 'Calistoga', cursive;
    color: white;
    font-size: clamp(18px, 4vw, 42px); /* Slightly smaller max to prevent overflow */
    text-transform: uppercase;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    margin-bottom: 8px;
    width: 95%; /* More width */
    text-align: center;
    line-height: 1.1;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-stat-box {
    background: rgba(0,0,0,0.3);
    border: 2px solid #facc15;
    border-radius: 999px;
    padding: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.game-stat-icon {
    width: 48px; /* Larger Icons */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* Icon font size */
}

.game-stat-text {
    color: white;
    font-weight: 900;
    font-size: clamp(16px, 3vw, 28px); /* Responsive stat text */
    text-transform: uppercase;
}

.game-wings {
    position: absolute;
    width: 100vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
}

.star-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.game-star {
    font-size: 40px;
    color: #4b5563; /* grey */
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.game-star.active {
    color: #facc15; /* gold */
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.5));
}

.game-btn-pink {
    background: linear-gradient(to bottom, #ec4899, #be185d);
    border-bottom: 6px solid #831843;
    border-radius: 999px;
    color: white;
    font-weight: 900;
    padding: 10px 40px;
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 20px;
    transition: all 0.1s;
}
.game-btn-pink:active {
    transform: translateY(4px);
    border-bottom-width: 2px;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* === BIRTHDAY CELEBRATION STYLES === */
/* Balloon Animation for Birthday Effect */
#birthday-balloon-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

.balloon {
    position: absolute;
    bottom: -120px;
    width: 60px;
    height: 80px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.1),
                0 10px 20px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    /* Animation is set inline via JS */
}

.balloon::before {
    content: '';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100px;
    background: rgba(0, 0, 0, 0.3);
}

.balloon::after {
    content: '▼';
    position: absolute;
    top: 165px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
}

@keyframes flyUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-50vh) rotate(10deg);
    }
    100% {
        transform: translateY(-120vh) rotate(-5deg);
        opacity: 0;
    }
}

/* === COMBO SYSTEM === */
#combo-container {
    pointer-events: none;
    transition: opacity 0.2s;
}

#combo-text {
    will-change: transform, opacity;
}

#combo-fuse {
    will-change: width;

}

/* === HUD & COMBO STYLES === */
.game-hud-pulse {
    animation: hudBorderPulse 2s infinite;
}

@keyframes hudBorderPulse {
    0% { border-color: rgba(51, 65, 85, 0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
    50% { border-color: rgba(250, 204, 21, 0.6); box-shadow: 0 0 20px rgba(250, 204, 21, 0.3); } /* Yellow pulse */
    100% { border-color: rgba(51, 65, 85, 0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
}