/* --- PREMIUM RAFFLE PRO MAX V6.5 (ALIGNMENT FIXED) --- */
@import url('root.css');

.ultra-rf-container {
    display: flex; justify-content: center; align-items: center;
    padding: 10px 5px; min-height: 100vh; width: 100%; box-sizing: border-box;
}

.rf-card {
    width: 100%; max-width: 500px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 20px; padding: 45px 20px 30px;
    text-align: center; position: relative; box-shadow: 0 25px 60px rgba(0,0,0,0.8);
    backdrop-filter: blur(20px); overflow: hidden; box-sizing: border-box;
}

/* --- SMOOTH LIVE FEED --- */
.rf-live-feed { 
    margin-top: 25px; font-size: 11px; padding: 5px; border-radius: 12px; 
    font-weight: 800; min-height: 55px; display: flex; align-items: center; 
    justify-content: center; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent; text-transform: uppercase; overflow: hidden;
}

.checking-mode { color: #00d2ff; background: rgba(0, 210, 255, 0.08); border-color: rgba(0, 210, 255, 0.2); }
.rf-live-feed.success-mode { background: rgba(0, 255, 136, 0.1); color: #00ff88; border: 1px solid rgba(0, 255, 136, 0.2); }
.rf-live-feed.ban-mode { background: rgba(255, 71, 71, 0.1); color: #ff4747; border: 1px solid rgba(255, 71, 71, 0.2); }
.rf-live-feed.warning-mode { background: rgba(255, 152, 0, 0.1); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.2); }


#rf-feed-content { 
    display: inline-flex; align-items: center; gap: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1; transform: translateY(0);
}

/* Animation States */
.feed-exit { opacity: 0 !important; transform: translateY(-15px) !important; }
.feed-enter { opacity: 0 !important; transform: translateY(15px) !important; }

/* Precise Rotation */
.load-spin { 
    display: inline-flex; align-items: center; justify-content: center;
    animation: spin 1s linear infinite; 
    width: 14px; height: 14px; /* Fixed size prevents jumping */
}

@keyframes spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

/* --- PROGRESS BAR --- */
.rf-progress-box { margin-bottom: 30px; text-align: left; width: 100%; }
.prog-info { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray); margin-bottom: 12px; font-weight: 800; }
.prog-bar-bg { width: 100%; height: 8px; background: #000; border-radius: 50px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
.prog-fill { 
    height: 100%; 
    background: linear-gradient(90deg, #ffcc2d, #ff4757); 
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.5); /* Reddish Glow */
}
/* Shimmer Effect (Move Background) */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- OTHER UI ELEMENTS --- */
.rf-price-tag { position: absolute; top: 20px; left: -10px; background: linear-gradient(135deg, var(--primary), #ff9f1c); color: #000; font-weight: 900; font-size: 12px; padding: 6px 18px; border-radius: 4px; transform: rotate(-5deg); z-index: 10; }
.rf-badge-live { font-size: 10px; font-weight: 900; color: var(--live); letter-spacing: 2px; margin-bottom: 25px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 71, 87, 0.08); padding: 7px 16px; border-radius: 50px; border: 1px solid rgba(255, 71, 87, 0.15); }
.rf-badge-live span { width: 8px; height: 8px; background: var(--live); border-radius: 50%; animation: blink 1s infinite; }
.rf-title { font-size: clamp(26px, 7vw, 32px); font-weight: 900; color: var(--white); margin-bottom: 25px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.gem-icon { color: var(--gv-cyan); filter: drop-shadow(0 0 12px var(--gv-cyan)); }
.rf-join-btn { width: 100%; padding: 20px; background: linear-gradient(45deg, var(--primary), #ffb300); border: none; border-radius: 18px; color: #000; font-weight: 900; font-size: 16px; cursor: pointer; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 12px; }
.rf-history-btn { width: 100%; margin-top: 15px; padding: 15px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 15px; color: var(--gray); font-weight: 800; font-size: 12px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.rf-countdown { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 25px; }
.c-item { flex: 1; background: rgba(255,255,255,0.02); padding: 15px 5px; border-radius: 12px; border: 1px solid var(--border); }
.c-item b { display: block; font-size: 22px; color: var(--primary); }
.c-item span { font-size: 8px; color: var(--gray); font-weight: 800; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.animate-flicker { animation: flicker 2s infinite; }