/* ============================================ VIP PREMIUM THEME — cinematic mafia noir ============================================ Applied via . Mood: dim red lighting, velvet curtains, gold ornaments, cigar smoke, lounge atmosphere — premium mafia lounge. ============================================ */ body.is-vip { --accent-gold: #f5d142; --accent-gold-bright: #ffe066; } /* Premium background — dim red ember glow + gold mist */ body.is-vip .app::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at top, rgba(216, 48, 48, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom, rgba(168, 85, 247, 0.06) 0%, transparent 60%), radial-gradient(ellipse at center, rgba(212, 175, 55, 0.04) 0%, transparent 70%); animation: vipBackgroundShift 12s ease-in-out infinite alternate; } body.is-vip .app-bg-glow { background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(216, 48, 48, 0.08) 40%, transparent 70%); width: 700px; height: 700px; animation: vipGlowPulse 6s ease-in-out infinite; } @keyframes vipBackgroundShift { 0% { transform: translateY(0) rotate(0deg); opacity: 0.9; } 100% { transform: translateY(-12px) rotate(0.5deg); opacity: 1; } } @keyframes vipGlowPulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } } /* Header — velvet feel */ body.is-vip .header-content { background: linear-gradient(135deg, rgba(40, 12, 12, 0.85) 0%, rgba(28, 28, 40, 0.92) 40%, rgba(50, 18, 30, 0.88) 100%); border: 1px solid rgba(212, 175, 55, 0.4); box-shadow: 0 4px 32px rgba(216, 48, 48, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.1) inset; } body.is-vip .header-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-gold-bright), transparent); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } body.is-vip .header { position: relative; } /* User name — gold gradient */ body.is-vip .user-name { background: linear-gradient(135deg, #fff 0%, var(--accent-gold-bright) 50%, var(--accent-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 24px rgba(212, 175, 55, 0.3); } /* MMR progress fill — premium gradient */ body.is-vip .mmr-progress-fill { background: linear-gradient(90deg, var(--accent-blood) 0%, var(--accent-gold) 40%, var(--accent-gold-bright) 70%, #fff 100%); box-shadow: 0 0 12px rgba(212, 175, 55, 0.6); } body.is-vip .mmr-progress-value { color: var(--accent-gold-bright); text-shadow: 0 0 8px rgba(255, 224, 102, 0.5); } /* Tabs — luxe feel */ body.is-vip .tabs { background: linear-gradient(180deg, rgba(10, 10, 15, 0.95) 0%, rgba(20, 10, 20, 0.92) 100%); border-bottom: 1px solid rgba(212, 175, 55, 0.2); } body.is-vip .tab.active::before { background: linear-gradient(90deg, var(--accent-gold-bright), var(--accent-gold), var(--accent-blood)); box-shadow: 0 0 16px rgba(212, 175, 55, 0.8), 0 0 8px rgba(255, 224, 102, 0.6); } /* Stat cards — gilded */ body.is-vip .stat-card { background: linear-gradient(135deg, rgba(28, 18, 24, 0.95) 0%, rgba(24, 24, 31, 0.9) 100%); border-color: rgba(212, 175, 55, 0.25); } body.is-vip .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); opacity: 0.5; } body.is-vip .stat-card-value { color: var(--accent-gold-bright); text-shadow: 0 0 12px rgba(255, 224, 102, 0.25); } /* Cards — velvet */ body.is-vip .card { background: linear-gradient(135deg, rgba(28, 18, 24, 0.88) 0%, rgba(24, 24, 31, 0.92) 100%); border-color: rgba(212, 175, 55, 0.2); } /* Balance card — extra luxe */ body.is-vip .balance-card { background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(168, 85, 247, 0.08) 50%, rgba(216, 48, 48, 0.12) 100%); border: 1px solid rgba(212, 175, 55, 0.45); box-shadow: 0 6px 24px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); } body.is-vip .balance-amount { background: linear-gradient(180deg, var(--accent-gold-bright) 0%, var(--accent-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Achievements summary — premium */ body.is-vip .achievements-summary { background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(168, 85, 247, 0.08) 100%); border-color: rgba(212, 175, 55, 0.5); box-shadow: 0 4px 24px rgba(212, 175, 55, 0.15); } /* Footer — gold gradient line */ body.is-vip .footer { position: relative; } body.is-vip .footer::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); } /* Role cards — slight gold tint */ body.is-vip .role-card { border-color: rgba(212, 175, 55, 0.18); } body.is-vip .role-card--neutral { border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 0 16px rgba(212, 175, 55, 0.1); } /* Rank chip pulse for VIP */ body.is-vip .user-rank { background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(168, 85, 247, 0.05)); border-color: rgba(212, 175, 55, 0.4); } /* Shop tabs */ body.is-vip .shop-section-btn.active { background: linear-gradient(135deg, var(--accent-gold-bright) 0%, var(--accent-gold) 50%, #b8902a 100%); box-shadow: 0 4px 14px rgba(212, 175, 55, 0.5); } /* Smoke ambient particles (decorative) */ body.is-vip .app::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(2px 2px at 10% 80%, rgba(212, 175, 55, 0.4), transparent), radial-gradient(1px 1px at 30% 60%, rgba(212, 175, 55, 0.3), transparent), radial-gradient(2px 2px at 70% 40%, rgba(216, 48, 48, 0.2), transparent), radial-gradient(1px 1px at 90% 20%, rgba(168, 85, 247, 0.3), transparent); background-size: 200px 200px, 250px 250px, 300px 300px, 180px 180px; animation: vipParticles 30s linear infinite; opacity: 0.6; } @keyframes vipParticles { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 200px -300px, -250px 200px, 300px -250px, -180px 300px; } } /* Buttons */ body.is-vip .btn-confirm, body.is-vip .btn-buy, body.is-vip .btn-magic-submit { background: linear-gradient(135deg, var(--accent-gold-bright) 0%, var(--accent-gold) 50%, #8a6f1a 100%); box-shadow: 0 4px 14px rgba(212, 175, 55, 0.45); } /* Modal — premium glow */ body.is-vip .modal-content { background: linear-gradient(135deg, rgba(28, 18, 24, 0.96) 0%, rgba(24, 24, 31, 0.96) 100%); border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 10px 60px rgba(212, 175, 55, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; }