/* ======================================== Salamanca96 - Premium Casino Experience Main Stylesheet ======================================== */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;600;700;800&display=swap'); /* Tailwind's tabular-nums utility isn't in the local prebuilt CSS — define it so masked phones / amounts keep aligned digits in Roboto (no monospace font). */ .tabular-nums { font-variant-numeric: tabular-nums; } /* ---------------------------------------- CSS Variables / Design Tokens ---------------------------------------- */ :root { /* Colors */ --primary-bg: #050505; --secondary-bg: #0a0a0a; --card-bg: #1a1a1a; --card-bg-alt: #121212; --border-light: rgba(255, 255, 255, 0.05); --border-medium: rgba(255, 255, 255, 0.1); /* Accent Colors */ --neon-pink: #ff00de; --gold-primary: #FFD24A; --gold-light: #F5D061; --gold-dark: #D4AF37; --pink-primary: #ec008c; --purple-primary: #833ab4; /* Text Colors */ --text-primary: #ffffff; --text-secondary: #9ca3af; --text-muted: #6b7280; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* Border Radius */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } /* ---------------------------------------- Base Styles ---------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Lock html + body to viewport so iOS Safari's address-bar collapse animation cannot reposition fixed children (header / footer / scroll container). The transform on creates a new containing block, which makes position:fixed descendants resolve relative to (already locked) instead of the live visual viewport — that's what actually stops the whole page from wobbling during chrome animation. */ html { transform: translateZ(0); } html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; } body { font-family: 'Roboto', 'Poppins', sans-serif; background-color: var(--primary-bg); background-image: radial-gradient(circle at 10% 20%, rgba(157, 0, 255, 0.05) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(255, 0, 222, 0.05) 0%, transparent 40%); color: var(--text-primary); -webkit-tap-highlight-color: transparent; font-size: 14px; line-height: 1.5; } /* ---------------------------------------- Utility Classes ---------------------------------------- */ .hidden { display: none; } .hidden-important { display: none !important; } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ---------------------------------------- Glass Panel Effect ---------------------------------------- */ .glass-panel { background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); } /* ---------------------------------------- Button Styles ---------------------------------------- */ .btn-gold { background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-light) 50%, var(--gold-dark) 100%); color: #1a1a1a; font-weight: 800; border: 1px solid #FFE57F; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); position: relative; overflow: hidden; transition: all var(--transition-normal); cursor: pointer; } .btn-gold:active { transform: scale(0.96); } .btn-gold:hover { filter: brightness(1.1); } .btn-neon { background: linear-gradient(90deg, var(--pink-primary), #fc6767); color: white; box-shadow: 0 0 10px rgba(236, 0, 140, 0.5); transition: all var(--transition-normal); border: none; cursor: pointer; } .btn-neon:hover { filter: brightness(1.2); } /* Partnership Button - Breathing Effect */ .btn-partner-glow { background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 100%); background-size: 200% 200%; animation: partner-breathe 2s infinite, gradient-shift 5s ease infinite; border: 1px solid rgba(255, 255, 255, 0.2); } @keyframes partner-breathe { 0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); border-color: rgba(236, 72, 153, 0.5); } 70% { box-shadow: 0 0 10px 5px rgba(236, 72, 153, 0); border-color: rgba(236, 72, 153, 1); } 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); border-color: rgba(236, 72, 153, 0.5); } } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Deposit Method Button */ .deposit-method-btn { background: linear-gradient(90deg, #b91c78 0%, #7c1a5d 100%); border: 1px solid #d946ef; transition: all var(--transition-normal); } .deposit-method-btn:hover { filter: brightness(1.2); transform: translateX(5px); } /* ---------------------------------------- Card Styles ---------------------------------------- */ .premium-card { background: linear-gradient(145deg, #1a1a1a, #0f0f0f); border: 1px solid var(--border-light); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); transition: transform var(--transition-fast); } /* Promo Card - Unclaimed (Glowing) */ .promo-glow-card { background: linear-gradient(180deg, #2e1065 0%, #0f0518 100%); border: 1px solid rgba(217, 70, 239, 0.3); animation: border-breathe 3s infinite ease-in-out; transition: all var(--transition-normal); } /* Promo Card Breathing Animation */ /* Promo Card Breathe Animation */ .promo-card-breathe { animation: promo-breathe 2.5s infinite ease-in-out; transition: all 0.2s ease; } .promo-card-breathe:hover { animation-play-state: paused; transform: scale(1.03); } /* ======================================== Bonus Card - 金色发光边框效果 ======================================== */ .bonus-card-glow { position: relative; background: linear-gradient(135deg, rgba(30, 30, 40, 0.95) 0%, rgba(15, 15, 25, 0.98) 100%); border-radius: 12px; border: 1px solid rgba(212, 175, 55, 0.3); overflow: visible; transition: all 0.3s ease; } /* 金色发光边框动画 */ .bonus-card-glow::before { content: ''; position: absolute; inset: -2px; border-radius: 14px; background: linear-gradient( 90deg, transparent 0%, rgba(212, 175, 55, 0.8) 25%, rgba(255, 215, 0, 1) 50%, rgba(212, 175, 55, 0.8) 75%, transparent 100% ); background-size: 200% 100%; animation: border-glow 3s linear infinite; z-index: -1; opacity: 0.6; } /* 内部遮罩 */ .bonus-card-glow::after { content: ''; position: absolute; inset: 1px; background: linear-gradient(135deg, rgba(25, 25, 35, 0.98) 0%, rgba(15, 15, 25, 0.99) 100%); border-radius: 11px; z-index: -1; } @keyframes border-glow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* 可领取的卡片 - 更亮更快 */ .bonus-card-glow.can-claim { border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 30px rgba(255, 215, 0, 0.1), inset 0 0 20px rgba(255, 215, 0, 0.05); } .bonus-card-glow.can-claim::before { opacity: 1; animation: border-glow 2s linear infinite; background: linear-gradient( 90deg, transparent 0%, rgba(255, 215, 0, 0.9) 20%, rgba(255, 255, 255, 1) 50%, rgba(255, 215, 0, 0.9) 80%, transparent 100% ); background-size: 200% 100%; } /* 闪烁星星效果 */ .bonus-card-glow.can-claim .sparkle { position: absolute; width: 8px; height: 8px; background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 70%); border-radius: 50%; animation: sparkle 1.5s ease-in-out infinite; pointer-events: none; } .bonus-card-glow.can-claim .sparkle:nth-child(1) { top: -4px; left: 20%; animation-delay: 0s; } .bonus-card-glow.can-claim .sparkle:nth-child(2) { top: 30%; right: -4px; animation-delay: 0.3s; } .bonus-card-glow.can-claim .sparkle:nth-child(3) { bottom: -4px; left: 60%; animation-delay: 0.6s; } .bonus-card-glow.can-claim .sparkle:nth-child(4) { top: 60%; left: -4px; animation-delay: 0.9s; } @keyframes sparkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* 不可领取（已登录但条件不符 / 未登录） */ .bonus-card-glow.not-claimable { opacity: 0.45; filter: grayscale(40%); } .bonus-card-glow.not-claimable:hover { opacity: 0.65; filter: grayscale(20%); } /* 禁用状态 */ .bonus-card-glow.disabled { border-color: rgba(100, 100, 100, 0.2); opacity: 0.35; filter: grayscale(60%); } .bonus-card-glow.disabled::before { opacity: 0.2; animation: border-glow 6s linear infinite; background: linear-gradient( 90deg, transparent 0%, rgba(150, 150, 150, 0.5) 50%, transparent 100% ); background-size: 200% 100%; } /* Hover 效果 */ .bonus-card-glow:hover { transform: translateY(-2px); } .bonus-card-glow.can-claim:hover { box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 50px rgba(255, 215, 0, 0.2), inset 0 0 30px rgba(255, 215, 0, 0.1); } .bonus-card-glow:hover::before { animation-duration: 1.5s; } /* 内容层 */ .bonus-card-glow .card-content { position: relative; z-index: 1; padding: 12px; text-align: center; } /* Promo Card Disabled - Not Eligible */ .promo-card-disabled, [data-eligible="false"] { opacity: 0.35 !important; filter: grayscale(80%) !important; animation: none !important; cursor: not-allowed !important; pointer-events: none; } .promo-card-disabled:hover, [data-eligible="false"]:hover { opacity: 0.4 !important; filter: grayscale(70%) !important; transform: none !important; } /* Promo Card Active - Eligible to claim */ .promo-card-active { animation: promo-breathe 2.5s infinite ease-in-out; filter: none; opacity: 1; } @keyframes promo-breathe { 0%, 100% { box-shadow: 0 0 5px rgba(236, 72, 153, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.02); border-color: rgba(236, 72, 153, 0.3); } 50% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.05); border-color: rgba(236, 72, 153, 0.8); } } @keyframes border-breathe { 0%, 100% { border-color: rgba(217, 70, 239, 0.3); box-shadow: 0 0 5px rgba(217, 70, 239, 0.1); } 50% { border-color: rgba(217, 70, 239, 1); box-shadow: 0 0 15px rgba(217, 70, 239, 0.5); } } /* Promo Card - Claimed (Dark) */ .promo-claimed-card { background: #121212; border: 1px solid #333; opacity: 0.5; filter: grayscale(100%); transform: scale(0.98); pointer-events: none; } .promo-claimed-card button { background: #333 !important; color: #888 !important; border: none !important; } /* VIP Shimmer Effect */ .vip-shimmer { background: linear-gradient(45deg, transparent 40%, rgba(255,215,0,0.1) 50%, transparent 60%); background-size: 200% 200%; animation: shimmer 5s infinite linear; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------------------------------------- Form Inputs ---------------------------------------- */ .custom-input { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--border-medium); color: white; transition: all var(--transition-normal); width: 100%; padding: 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; } .flex > select.custom-input.w-28 { width: 7rem; flex: 0 0 7rem; } .flex > .custom-input.flex-1 { width: auto; min-width: 0; } .custom-input:focus { border-color: var(--gold-primary); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); outline: none; } .custom-input::placeholder { color: var(--text-muted); } /* ---------------------------------------- Navigation Styles ---------------------------------------- */ .nav-icon { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .nav-item { gap: 1px; min-width: 0; } .nav-image { width: auto !important; height: 38px !important; object-fit: contain !important; display: block !important; opacity: 0.72; filter: saturate(0.82) brightness(0.82); } .nav-item.active-nav .nav-icon { color: #ffd700; transform: scale(1.05); text-shadow: 0 5px 15px rgba(255, 215, 0, 0.5); } .nav-item.active-nav .nav-image { opacity: 1 !important; filter: saturate(1.12) brightness(1.12) drop-shadow(0 4px 10px rgba(255, 210, 49, 0.45)) !important; } #bottom-nav .nav-item img.nav-image { width: auto !important; height: 38px !important; min-width: 0 !important; min-height: 38px !important; max-width: 48px !important; max-height: 38px !important; object-fit: contain !important; } #bottom-nav .nav-item > .relative { width: 48px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .support-nav-icon-wrap { position: relative; } .support-unread-badge { display: none; position: absolute; top: -5px; right: -7px; z-index: 3; min-width: 18px; height: 18px; padding: 0 4px; align-items: center; justify-content: center; border: 1.5px solid #1a1d23; border-radius: 999px; background: #e53935; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); color: #fff !important; font-size: 10px; font-weight: 800 !important; line-height: 1; letter-spacing: 0; pointer-events: none; } .support-unread-badge.is-visible { display: inline-flex; } /* On the 50px floating avatar the nav-sized badge reads as a speck, and it has to survive sitting on top of the gold halo ring behind the button. */ .support-unread-badge--floating { top: -3px; right: -3px; min-width: 21px; height: 21px; border-width: 2px; font-size: 11px; z-index: 4; } .nav-item .nav-label { display: block !important; width: 100%; margin-top: 0; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0 !important; text-align: center !important; color: rgba(255, 220, 120, 0.58) !important; } .nav-item.active-nav .nav-label { color: #ffdf6a !important; } .nav-item.active-nav span { color: #ffd700; font-weight: 600; } .nav-indicator { height: 3px; width: 0; background: #ffd700; margin: 0 auto; border-radius: 10px; transition: width var(--transition-normal); } .nav-item.active-nav .nav-indicator { width: 20px; } /* ---------------------------------------- View Transitions ---------------------------------------- */ .view-section { display: none; opacity: 0; transform: translateY(10px); transition: opacity var(--transition-normal), transform var(--transition-normal); } .view-section.active { display: block; opacity: 1; transform: translateY(0); } /* ---------------------------------------- Modal Styles ---------------------------------------- */ .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(4px); padding: 1rem; z-index: 200; /* 提高 z-index，在 header/footer 之上 */ } .modal.hidden { display: none !important; pointer-events: none !important; } .modal-content { width: 100%; max-width: 24rem; max-height: calc(100vh - 140px); /* 留出 header + footer 的空间 */ max-height: calc(100dvh - 140px); background: var(--card-bg); border-radius: var(--radius-xl); border: 1px solid var(--border-medium); position: relative; overflow: hidden; overflow-y: auto; } .modal-enter { animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ---------------------------------------- Animations ---------------------------------------- */ /* Ticker Animation */ .ticker-wrap { animation: ticker 30s linear infinite; } @keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Live Feed - 静态列表，不滚动 */ .live-feed-container { height: 192px; overflow-y: auto; position: relative; } .live-feed-list { display: flex; flex-direction: column; } .live-transaction-dot { position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); flex: 0 0 auto; animation: liveTransactionBreath 1.6s ease-in-out infinite; } .live-transaction-dot::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 1px solid rgba(239, 68, 68, 0.45); animation: liveTransactionRing 1.6s ease-in-out infinite; } @keyframes liveTransactionBreath { 0%, 100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); opacity: 0.82; } 50% { transform: scale(1.08); box-shadow: 0 0 10px 3px rgba(239, 68, 68, 0.35); opacity: 1; } } @keyframes liveTransactionRing { 0% { transform: scale(0.65); opacity: 0.65; } 100% { transform: scale(1.35); opacity: 0; } } /* 隐藏滚动条但保留滚动功能 */ .live-feed-container::-webkit-scrollbar { width: 0; display: none; } /* 旧的 scroll-vertical 保留兼容 */ .scroll-vertical { overflow-y: auto; } .scroll-vertical::-webkit-scrollbar { width: 0; display: none; } @keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } /* Pulse Animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Ping Animation */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } /* ---------------------------------------- Toast Notification ---------------------------------------- */ .toast { position: fixed; top: 5rem; left: 50%; transform: translateX(-50%); background: #22c55e; color: white; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); z-index: 90; display: flex; align-items: center; gap: 0.5rem; transition: all var(--transition-normal); opacity: 0; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------------------------------------- Live Feed Tabs ---------------------------------------- */ .live-tab { flex: 1; padding: 0.75rem; font-size: 0.6875rem; font-weight: 700; text-align: center; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid transparent; transition: all var(--transition-normal); background: transparent; cursor: pointer; } .live-tab:hover { color: var(--text-secondary); } .live-tab.active { color: #facc15; border-color: #facc15; background: rgba(255, 255, 255, 0.05); } /* ---------------------------------------- Responsive Utilities ---------------------------------------- */ @media (max-width: 640px) { body { font-size: 13px; } } /* Safe area for bottom navigation */ .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); } /* ---------------------------------------- Live Feed New Item Animation ---------------------------------------- */ @keyframes liveFeedSlideIn { 0% { opacity: 0; transform: translateY(-20px); max-height: 0; } 100% { opacity: 1; transform: translateY(0); max-height: 60px; } } .live-feed-new { animation: liveFeedSlideIn 0.4s ease-out forwards; background: rgba(250, 204, 21, 0.1) !important; border-color: rgba(250, 204, 21, 0.3) !important; } /* Remove highlight after animation */ .live-feed-new { animation: liveFeedSlideIn 0.4s ease-out forwards, liveFeedFadeHighlight 2s ease-out 0.4s forwards; } @keyframes liveFeedFadeHighlight { 0% { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.3); } 100% { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.05); } } /* Live Feed New Item Animation */ @keyframes newItemSlideIn { 0% { opacity: 0; transform: translateY(-20px); background: rgba(34, 197, 94, 0.3); } 50% { background: rgba(34, 197, 94, 0.2); } 100% { opacity: 1; transform: translateY(0); background: rgba(255, 255, 255, 0.05); } } .animate-new-item { animation: newItemSlideIn 0.8s ease-out forwards; } /* Deposit new item — high contrast flash 5 times over 5s */ @keyframes feedDepositFlash { 0% { background: rgba(var(--feed-deposit-rgb, 0,255,100), 0.7); color: var(--feed-deposit-text, #00FF64); text-shadow: 0 0 6px var(--feed-deposit-text, #00FF64); } 8% { background: transparent; color: inherit; text-shadow: none; } 20% { background: rgba(var(--feed-deposit-rgb, 0,255,100), 0.6); color: var(--feed-deposit-text, #00FF64); text-shadow: 0 0 6px var(--feed-deposit-text, #00FF64); } 28% { background: transparent; color: inherit; text-shadow: none; } 40% { background: rgba(var(--feed-deposit-rgb, 0,255,100), 0.5); color: var(--feed-deposit-text, #00FF64); text-shadow: 0 0 4px var(--feed-deposit-text, #00FF64); } 48% { background: transparent; color: inherit; text-shadow: none; } 60% { background: rgba(var(--feed-deposit-rgb, 0,255,100), 0.4); color: var(--feed-deposit-text, #00FF64); text-shadow: 0 0 3px var(--feed-deposit-text, #00FF64); } 68% { background: transparent; color: inherit; text-shadow: none; } 80% { background: rgba(var(--feed-deposit-rgb, 0,255,100), 0.3); color: var(--feed-deposit-text, #00FF64); } 88% { background: transparent; color: inherit; } 100% { background: transparent; color: inherit; } } .feed-anim-deposit { animation: feedDepositFlash 5s ease-in-out forwards; } /* Withdraw new item — high contrast flash 5 times over 5s */ @keyframes feedWithdrawFlash { 0% { background: rgba(var(--feed-withdraw-rgb, 255,215,0), 0.7); color: var(--feed-withdraw-text, #FFD700); text-shadow: 0 0 6px var(--feed-withdraw-text, #FFD700); } 8% { background: transparent; color: inherit; text-shadow: none; } 20% { background: rgba(var(--feed-withdraw-rgb, 255,215,0), 0.6); color: var(--feed-withdraw-text, #FFD700); text-shadow: 0 0 6px var(--feed-withdraw-text, #FFD700); } 28% { background: transparent; color: inherit; text-shadow: none; } 40% { background: rgba(var(--feed-withdraw-rgb, 255,215,0), 0.5); color: var(--feed-withdraw-text, #FFD700); text-shadow: 0 0 4px var(--feed-withdraw-text, #FFD700); } 48% { background: transparent; color: inherit; text-shadow: none; } 60% { background: rgba(var(--feed-withdraw-rgb, 255,215,0), 0.4); color: var(--feed-withdraw-text, #FFD700); text-shadow: 0 0 3px var(--feed-withdraw-text, #FFD700); } 68% { background: transparent; color: inherit; text-shadow: none; } 80% { background: rgba(var(--feed-withdraw-rgb, 255,215,0), 0.3); color: var(--feed-withdraw-text, #FFD700); } 88% { background: transparent; color: inherit; } 100% { background: transparent; color: inherit; } } .feed-anim-withdraw { animation: feedWithdrawFlash 5s ease-in-out forwards; } @keyframes feedAmountBlink { 0%, 18%, 36%, 54%, 72% { color: #fde68a; background: rgba(245, 194, 11, 0.28); text-shadow: 0 0 7px rgba(253, 230, 138, 0.95), 0 1px 2px rgba(0,0,0,0.9); } 9%, 27%, 45%, 63%, 81%, 100% { color: #facc15; background: transparent; text-shadow: 0 1px 2px rgba(0,0,0,0.85); } } .feed-amount-blink { animation: feedAmountBlink 3s ease-in-out forwards !important; } @keyframes feedCellBlink { 0%, 20%, 40%, 60%, 80% { background: rgba(245, 194, 11, 0.32); box-shadow: inset 0 0 10px rgba(253, 230, 138, 0.24); } 10%, 30%, 50%, 70%, 100% { background: transparent; box-shadow: none; } } .feed-cell-blink { animation: feedCellBlink 6s ease-in-out forwards !important; } /* Fade In Animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; } /* ---------------------------------------- Hot Game Card - 呼吸发光效果 ---------------------------------------- */ @keyframes hotGameGlow { 0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.4), 0 0 20px rgba(168, 85, 247, 0.2), inset 0 0 10px rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.5); } 50% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.6), 0 0 30px rgba(236, 72, 153, 0.3), inset 0 0 15px rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.7); } } .hot-game-card { animation: hotGameGlow 3s ease-in-out infinite; border: 2px solid rgba(168, 85, 247, 0.5); border-radius: 12px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; background: linear-gradient(145deg, #1a1a2e, #0f0f1a); } .hot-game-card:hover { transform: scale(1.05); animation-play-state: paused; box-shadow: 0 0 25px rgba(236, 72, 153, 0.8), 0 0 50px rgba(168, 85, 247, 0.4); } .hot-game-card:active { transform: scale(0.98); } /* Hide scrollbar for slider */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Light sweep effect on card */ @keyframes lightSweep { 0% { left: -100%; } 100% { left: 200%; } } .hot-game-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); animation: lightSweep 4s ease-in-out infinite; pointer-events: none; z-index: 10; } /* ---------------------------------------- Hot Games Slider - Glow Animation ---------------------------------------- */ /* Hide scrollbar for hot games slider */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Hot game card breathing glow effect */ .hot-game-glow { animation: hotGameGlow 3s ease-in-out infinite; } @keyframes hotGameGlow { 0%, 100% { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 5px rgba(168, 85, 247, 0.3), 0 0 10px rgba(168, 85, 247, 0.2), inset 0 0 5px rgba(168, 85, 247, 0.1); } 50% { border-color: rgba(236, 72, 153, 0.7); box-shadow: 0 0 10px rgba(236, 72, 153, 0.5), 0 0 20px rgba(236, 72, 153, 0.3), 0 0 30px rgba(168, 85, 247, 0.2), inset 0 0 10px rgba(236, 72, 153, 0.2); } } /* Stagger animation for each card */ .hot-game-card:nth-child(1) .hot-game-glow { animation-delay: 0s; } .hot-game-card:nth-child(2) .hot-game-glow { animation-delay: 0.3s; } .hot-game-card:nth-child(3) .hot-game-glow { animation-delay: 0.6s; } .hot-game-card:nth-child(4) .hot-game-glow { animation-delay: 0.9s; } .hot-game-card:nth-child(5) .hot-game-glow { animation-delay: 1.2s; } .hot-game-card:nth-child(6) .hot-game-glow { animation-delay: 1.5s; } .hot-game-card:nth-child(7) .hot-game-glow { animation-delay: 1.8s; } .hot-game-card:nth-child(8) .hot-game-glow { animation-delay: 2.1s; } .hot-game-card:nth-child(9) .hot-game-glow { animation-delay: 0.15s; } .hot-game-card:nth-child(10) .hot-game-glow { animation-delay: 0.45s; } /* Hover enhanced glow */ .hot-game-card:hover .hot-game-glow, .hot-game-card:active .hot-game-glow { animation: hotGameGlowHover 1s ease-in-out infinite; } @keyframes hotGameGlowHover { 0%, 100% { border-color: rgba(236, 72, 153, 0.8); box-shadow: 0 0 15px rgba(236, 72, 153, 0.6), 0 0 30px rgba(168, 85, 247, 0.4), 0 0 45px rgba(168, 85, 247, 0.2); } 50% { border-color: rgba(250, 204, 21, 0.9); box-shadow: 0 0 20px rgba(250, 204, 21, 0.7), 0 0 40px rgba(236, 72, 153, 0.5), 0 0 60px rgba(168, 85, 247, 0.3); } } /* ---------------------------------------- Flex Container Layout (Header + Footer Fixed) ---------------------------------------- */ /* 锁死 HTML 和 BODY */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; background: #0a0a0a; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } /* ======================================== 方案 A: Position Fixed 布局 Header 和 Footer 都用 position: fixed ======================================== */ /* 容器 - 不再用 flex 布局 */ #app-layout { width: 100%; min-height: 100vh; min-height: 100svh; /* match body to keep heights consistent across address-bar collapse */ background: #1a1d23; overflow: hidden; } /* 固定 Header - position: fixed On iOS PWA (apple-mobile-web-app-status-bar-style: black-translucent), top:0 sits UNDER the status bar. Pad with safe-area-inset-top so the header content stays tappable. */ #app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100 !important; background: rgba(26, 29, 35, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); padding-top: env(safe-area-inset-top, 0px); } /* 滚动区域 - 用 padding 留出 header/footer 空间 */ #scroll-content { position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); /* header 高度 + 状态栏 safe area */ left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); /* footer 高度 + safe area */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; z-index: 1; /* 确保在 header/footer 下面 */ } /* Side menu drawer — same status-bar-overlap problem in PWA */ #side-menu { padding-top: env(safe-area-inset-top, 0px); } /* Pull-to-refresh indicator */ #ptr-indicator { position: fixed; left: 50%; top: calc(56px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -120%); z-index: 50; background: rgba(20, 20, 20, 0.95); border: 1px solid rgba(227, 192, 74, 0.35); border-radius: 9999px; padding: 6px 16px; color: #E3C04A; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); transition: transform 0.18s ease; pointer-events: none; display: flex; align-items: center; gap: 8px; } #ptr-indicator i { font-size: 12px; } #app-loading { position: fixed; top: calc(56px + 32px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; justify-content: center; background: #050505; transition: opacity 120ms ease, visibility 120ms ease; } body.theme-ready #app-loading { opacity: 0; visibility: hidden; pointer-events: none; } .s96-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.62); text-align: center; } .s96-loader-spinner { width: 34px; height: 34px; border: 2px solid rgba(255, 223, 106, 0.22); border-top-color: #ffdf6a; border-radius: 9999px; animation: s96LoaderSpin 0.8s linear infinite; } .s96-loader-text { font-size: 12px; font-weight: 700; letter-spacing: 0; } .s96-page-loader { min-height: max(280px, calc(100svh - 196px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); display: flex; align-items: center; justify-content: center; padding: 24px 0; } @keyframes s96LoaderSpin { to { transform: rotate(360deg); } } /* 主内容区 */ #app-main { /* 内容自适应高度 */ } /* 固定 Footer - position: fixed */ #bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100 !important; background: rgba(26, 29, 35, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; } body.chat-keyboard-open #bottom-nav { transform: translateY(110%); opacity: 0; pointer-events: none; } body.chat-keyboard-open #chat-input-bar, body.chat-keyboard-open #chat-waiting-input-bar { bottom: 0 !important; } .floating-support-widget { position: fixed; right: max(14px, calc((100vw - 672px) / 2 + 14px)); bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 112; width: 50px; height: 50px; } .floating-support-avatar { position: relative; width: 50px; height: 50px; border-radius: 999px; padding: 2px; background: linear-gradient(135deg, #FFD24A, #8f771f); border: 1px solid rgba(255, 220, 120, 0.55); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42), 0 0 18px rgba(255, 210, 74, 0.24); overflow: visible; display: block; transition: transform 160ms ease, box-shadow 160ms ease; } .floating-support-avatar::before { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 1px solid rgba(255, 210, 74, 0.46); opacity: 0.56; animation: supportAvatarHalo 2.7s ease-in-out infinite; pointer-events: none; } .floating-support-avatar:active { transform: scale(0.94); } .floating-support-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; animation: supportAvatarImageBreathe 2.7s ease-in-out infinite; } .floating-support-card { position: absolute; right: 38px; bottom: 34px; width: 154px; height: 68px; overflow: visible; border-radius: 8px; border: 1px solid rgba(255, 210, 74, 0.32); background: var(--sun-slate-card, #20242b); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42), 0 0 16px rgba(255, 210, 74, 0.12); display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 9px 7px 7px; cursor: pointer; animation: floatingSupportCardBreathe 2.7s ease-in-out infinite; } .floating-support-card::after { content: ""; position: absolute; right: -5px; bottom: 28px; width: 10px; height: 10px; background: var(--sun-slate-card, #20242b); border-right: 1px solid rgba(255, 210, 74, 0.32); border-bottom: 1px solid rgba(255, 210, 74, 0.32); transform: rotate(-45deg); } .floating-support-close { position: absolute; right: -6px; top: -10px; width: 18px; height: 18px; border-radius: 999px; background: var(--sun-slate-card-soft, #252a32); color: #FFD24A; border: 1px solid rgba(255, 210, 74, 0.42); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); font-size: 9px; display: flex; align-items: center; justify-content: center; z-index: 2; } .floating-support-card-top { position: relative; width: 52px; height: 52px; border-radius: 8px; background: linear-gradient(135deg, #FFD24A, #8f771f); display: flex; align-items: center; justify-content: center; overflow: visible; } .floating-support-card-top::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 999px; background: #FFD24A; box-shadow: 0 0 0 0 rgba(255, 210, 74, 0.38); animation: supportAvatarHalo 2.7s ease-in-out infinite; } .floating-support-card-top img { width: 48px; height: 48px; margin-top: 0; border-radius: 7px; object-fit: cover; border: 1px solid rgba(255, 235, 170, 0.72); box-shadow: 0 0 10px rgba(255, 210, 74, 0.24); animation: supportAvatarImageBreathe 2.7s ease-in-out infinite; } .floating-support-card-body { position: relative; z-index: 1; min-width: 0; padding: 0; background: transparent; border-radius: 0; } .floating-support-card-body p { display: block; margin: 0; color: #f5f5f5; font-size: 8px; line-height: 1.22; font-weight: 800; letter-spacing: 0; text-align: left; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); } .floating-support-widget.is-collapsed .floating-support-card, body.chat-keyboard-open .floating-support-widget { display: none; } .pokies-search-box { background: var(--sun-slate-card, #20242b) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } .pokies-search-box:focus-within { border-color: rgba(255, 210, 74, 0.55) !important; box-shadow: 0 0 0 1px rgba(255, 210, 74, 0.16) !important; } .pokies-search-box #pokies-search-input { color: #f5f5f5 !important; } .pokies-search-box #pokies-search-input::placeholder { color: #9aa3af !important; } .pokies-search-box button { color: #FFD24A !important; } /* 图标容器 */ #pokies-tabs { gap: 6px !important; } .pokies-shortcut-viewport { flex: 0 0 min(100%, calc(min(100vw, 430px) - 32px)); width: min(100%, calc(min(100vw, 430px) - 32px)); max-width: 398px; min-width: 0; } .pokies-slide-hint { position: absolute; top: 50%; z-index: 2; width: 18px; height: 26px; margin-top: -15px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255, 210, 74, 0.92); background: rgba(32, 36, 43, 0.78); border: 1px solid rgba(255, 210, 74, 0.24); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26); font-size: 9px; line-height: 1; cursor: pointer; pointer-events: auto; } .pokies-slide-hint-left { left: 6px; } .pokies-slide-hint-right { right: 6px; } #pokies-tabs .pokies-tab { width: clamp(52px, calc((min(100vw, 430px) - 56px) / 5), 75px) !important; height: 60px !important; } #pokies-tabs .pokies-tab img { width: clamp(48px, calc((min(100vw, 430px) - 96px) / 5), 56px) !important; height: clamp(48px, calc((min(100vw, 430px) - 96px) / 5), 56px) !important; max-width: 56px !important; max-height: 56px !important; } #nav-icons-container { height: 60px; width: 100%; } /* Safe Area Spacer */ #safe-area-spacer { width: 100%; height: env(safe-area-inset-bottom, 0px); background: transparent; flex-shrink: 0; } /* iOS Safari 兼容 */ @supports (-webkit-touch-callout: none) { #scroll-content { /* iOS 特殊处理 */ -webkit-overflow-scrolling: touch; } body { overscroll-behavior-y: none; } } /* Chat view 居中 */ #view-chat { position: relative; height: calc(100vh - 160px); height: calc(100dvh - 160px); } /* ======================================== User Card - 发光卡片样式 ======================================== */ /* 卡片包装层 - 微浮动动画 */ .user-card-wrapper { position: relative; animation: user-card-float 8s ease-in-out infinite; } @keyframes user-card-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } } /* 背景流光边框 */ .user-card-border-gradient { position: absolute; inset: -1px; border-radius: 18px; background: conic-gradient( from 0deg, transparent 0%, transparent 45%, rgba(139, 92, 246, 0.5) 50%, rgba(236, 72, 153, 0.5) 55%, transparent 60%, transparent 100% ); animation: user-card-border-spin 6s linear infinite; z-index: -1; filter: blur(12px); opacity: 0.4; } @keyframes user-card-border-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 内部边框线 */ .user-card-border-inner { position: absolute; inset: 0; border-radius: 16px; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2; pointer-events: none; } /* 卡片主体 */ .user-card-body { background: rgba(10, 10, 14, 0.7); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.4); position: relative; overflow: hidden; z-index: 10; } /* 噪点纹理 */ .user-card-body::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); opacity: 0.3; mix-blend-mode: overlay; pointer-events: none; } /* 头像光环 */ .user-avatar-glow { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(139, 92, 246, 0.5), rgba(236, 72, 153, 0.5), transparent); animation: user-avatar-spin 5s linear infinite; filter: blur(6px); opacity: 0.5; } @keyframes user-avatar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 在线状态点 */ .user-online-dot { box-shadow: 0 0 0 2px #0a0a0e; } /* 余额文字光泽 */ .user-balance-shine { background: linear-gradient( to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 40%, rgba(236, 72, 153, 0.8) 50%, rgba(139, 92, 246, 0.8) 60%, rgba(255,255,255,0.9) 100% ); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: user-balance-text-shine 4s ease-in-out infinite; } @keyframes user-balance-text-shine { to { background-position: 200% center; } } /* 按钮效果 */ .user-card-btn { transition: all 0.3s ease; } .user-card-btn:active { transform: scale(0.96); } /* Clear Balance 按钮 - 激活状态 */ .user-clear-btn { border: 1px solid rgba(239, 68, 68, 0.15); background: linear-gradient(90deg, rgba(239, 68, 68, 0.05), rgba(236, 72, 153, 0.05)); color: rgba(248, 113, 113, 0.8); transition: all 0.3s; } .user-clear-btn:hover:not(.user-clear-btn-disabled) { border-color: rgba(239, 68, 68, 0.3); background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(236, 72, 153, 0.1)); } /* Clear Balance 按钮 - 禁用状态（暗色） */ .user-clear-btn-disabled { border: 1px solid rgba(100, 100, 100, 0.1) !important; background: rgba(50, 50, 50, 0.2) !important; color: rgba(100, 100, 100, 0.5) !important; cursor: not-allowed; } /* Clear Balance 按钮 - 激活状态（亮色） */ .user-clear-btn-active { border: 1px solid rgba(239, 68, 68, 0.3) !important; background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(236, 72, 153, 0.1)) !important; color: rgba(248, 113, 113, 0.9) !important; cursor: pointer; } /* ========================================== Provider Grid - 3 Column Themed Cards ========================================== */ #providers-grid, #all-providers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 4px; } .provider-card-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border-radius: 12px; aspect-ratio: 1; transition: all 0.3s ease; overflow: hidden; } .provider-card:hover .provider-card-inner { transform: translateY(-2px); } .provider-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .provider-card-img { width: 90%; height: 70%; object-fit: contain; border-radius: 8px; } .provider-card-icon-fallback { width: 100%; height: 70%; border-radius: 8px; align-items: center; justify-content: center; } .provider-card-name { font-size: 11px; font-weight: 600; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; } /* Sun theme - hexagonal clip */ /* Sun theme - warm glow cards with soft animations */ .provider-card-sun { position: relative; overflow: hidden; } .provider-card-sun .provider-card-inner { border-radius: 16px; padding: 18px 10px; position: relative; overflow: hidden; border: 1px solid rgba(227, 192, 74, 0.25) !important; background: linear-gradient(145deg, #1a1400, #2a2100) !important; animation: sunCardBreathe 4s ease-in-out infinite; transition: all 0.4s ease; } /* Soft breathing glow */ @keyframes sunCardBreathe { 0%, 100% { box-shadow: 0 2px 8px rgba(227, 192, 74, 0.1), inset 0 0 15px rgba(201, 162, 39, 0.03); } 50% { box-shadow: 0 4px 16px rgba(227, 192, 74, 0.2), inset 0 0 20px rgba(201, 162, 39, 0.06); } } /* Stagger animation per card */ .provider-card-sun:nth-child(2) .provider-card-inner { animation-delay: 0.5s; } .provider-card-sun:nth-child(3) .provider-card-inner { animation-delay: 1s; } .provider-card-sun:nth-child(4) .provider-card-inner { animation-delay: 0.3s; } .provider-card-sun:nth-child(5) .provider-card-inner { animation-delay: 0.8s; } .provider-card-sun:nth-child(6) .provider-card-inner { animation-delay: 1.3s; } .provider-card-sun:nth-child(7) .provider-card-inner { animation-delay: 0.2s; } .provider-card-sun:nth-child(8) .provider-card-inner { animation-delay: 0.7s; } .provider-card-sun:nth-child(9) .provider-card-inner { animation-delay: 1.1s; } /* Shimmer sweep across card */ .provider-card-sun .provider-card-inner::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 221, 100, 0.06), rgba(227, 192, 74, 0.08), transparent); animation: sunShimmer 6s ease-in-out infinite; z-index: 1; pointer-events: none; } @keyframes sunShimmer { 0%, 100% { left: -100%; } 50% { left: 140%; } } .provider-card-sun:nth-child(odd) .provider-card-inner::before { animation-delay: 2s; } .provider-card-sun:nth-child(3n) .provider-card-inner::before { animation-delay: 3.5s; } /* Warm ember dot - top corner */ .provider-card-sun .provider-card-inner::after { content: ''; position: absolute; top: 6px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: #E3C04A; animation: sunEmberPulse 3s ease-in-out infinite; z-index: 2; pointer-events: none; } @keyframes sunEmberPulse { 0%, 100% { opacity: 0.2; box-shadow: 0 0 2px rgba(227, 192, 74, 0.3); transform: scale(0.8); } 50% { opacity: 0.8; box-shadow: 0 0 6px rgba(227, 192, 74, 0.6); transform: scale(1.2); } } .support-helpdesk { color: #f5f5f5; } .support-chat-time-pill { width: fit-content; margin: 0 auto 13px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #333; font-size: 11px; font-weight: 900; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); } .support-message-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: start; } .support-staff-avatar { position: relative; width: 30px; height: 30px; border-radius: 999px; padding: 1px; background: linear-gradient(135deg, #FFD24A, #8f771f); border: 1px solid rgba(255, 210, 74, 0.55); box-shadow: 0 0 16px rgba(255, 210, 74, 0.24); overflow: visible; margin-top: 39px; } .support-staff-avatar::before { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 1px solid rgba(255, 210, 74, 0.44); opacity: 0.5; animation: supportAvatarHalo 2.7s ease-in-out infinite; pointer-events: none; } .support-staff-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; animation: supportAvatarImageBreathe 2.7s ease-in-out infinite; } .support-message-content { min-width: 0; } .support-staff-name { margin: 0 0 8px 2px; color: #FFD24A; font-size: 11px; font-weight: 1000; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 0 12px rgba(255, 210, 74, 0.2); } .support-chat-bubble { border-radius: 8px; background: var(--sun-slate-card, #20242b); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34); padding: 14px 12px 12px; } .support-chat-bubble h3 { margin: 0 0 6px; color: #fff; font-size: 18px; line-height: 1.15; font-weight: 1000; } .support-chat-bubble h3::after { content: "96"; color: #FFD24A; margin-left: 4px; } .support-chat-bubble p { margin: 0; color: #b9c0ca; font-size: 12px; line-height: 1.55; font-weight: 600; } .support-topic-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .support-topic-row span { border-radius: 999px; padding: 7px 10px; background: rgba(255, 210, 74, 0.08); border: 1px solid rgba(255, 210, 74, 0.38); color: #ffeaa0; font-size: 10px; font-weight: 900; line-height: 1; } .support-response-note { margin-top: 10px !important; color: rgba(255, 234, 160, 0.72) !important; font-size: 10px !important; text-align: center; } .support-orbit::before, .support-orbit::after { content: ''; position: absolute; inset: 54px; border-radius: 999px; border: 2px solid rgba(255, 210, 74, 0.18); pointer-events: none; } .support-orbit::after { inset: 28px; border-color: rgba(255, 210, 74, 0.10); } .support-live-core { background: rgba(10, 8, 0, 0.92); border: 3px solid rgba(255, 210, 74, 0.9); box-shadow: 0 0 0 6px rgba(255, 210, 74, 0.08), 0 0 34px rgba(255, 210, 74, 0.25); animation: supportLiveFlicker 3.9s linear infinite; overflow: hidden; filter: drop-shadow(0 0 16px rgba(255, 210, 74, 0.38)); } .support-live-agent-img { animation: supportAgentNeonFlicker 4.6s linear infinite; } .support-start-chat-button { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; margin: 0; padding: 0 18px; border: 1px solid rgba(255, 228, 130, 0.62); border-radius: 999px; background: linear-gradient(135deg, #FFD24A, #D9B23A); color: #15171c; font-size: 12px; font-weight: 900; letter-spacing: 0; overflow: visible; box-shadow: 0 6px 18px rgba(217, 178, 58, 0.22), 0 0 0 rgba(255, 210, 74, 0); animation: supportStartBreathe 2.15s ease-in-out infinite; } .support-start-chat-button::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 1px solid rgba(255, 210, 74, 0.4); opacity: 0.55; animation: supportStartHalo 2.15s ease-in-out infinite; pointer-events: none; } .support-start-chat-button span { display: inline-block; border-bottom: 0; padding-bottom: 0; } .support-orbit-spinner { animation: supportOrbitSpinSlow 38s linear infinite; } .support-orbit-item { position: absolute; width: 52px; height: 52px; border-radius: 0; border: 0; background: transparent; color: #ffe073; box-shadow: none; display: flex; align-items: center; justify-content: center; transform-origin: center center; } .support-orbit-item span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; animation: supportOrbitCounterSpinSlow 38s linear infinite; } .support-orbit-item i { font-size: 34px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; line-height: 1; } .support-orbit-item-1 { left: 50%; top: 0; transform: translate(-50%, 0); } .support-orbit-item-2 { right: 0; top: 50%; transform: translate(0, -50%); } .support-orbit-item-3 { left: 50%; bottom: 0; transform: translate(-50%, 0); } .support-orbit-item-4 { left: 0; top: 50%; transform: translate(0, -50%); } .support-orbit-item-1 { color: #D4AE33; } .support-orbit-item-2 { color: #ffd64d; } .support-orbit-item-3 { color: #5cff8d; } .support-orbit-item-4 { color: #ff6b55; } .support-orbit-item-1, .support-orbit-item-2, .support-orbit-item-3, .support-orbit-item-4 { animation: none; } @keyframes supportLiveBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 6px rgba(255, 210, 74, 0.08), 0 0 28px rgba(255, 210, 74, 0.22); } 50% { transform: translate(-50%, -50%) scale(1.045); box-shadow: 0 0 0 12px rgba(255, 210, 74, 0.13), 0 0 46px rgba(255, 210, 74, 0.36); } } @keyframes supportStartBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(217, 178, 58, 0.22), 0 0 0 0 rgba(255, 210, 74, 0.22); filter: brightness(1); } 50% { transform: scale(1.025); box-shadow: 0 10px 28px rgba(217, 178, 58, 0.34), 0 0 22px rgba(255, 210, 74, 0.34); filter: brightness(1.08); } } @keyframes supportStartHalo { 0%, 100% { transform: scale(0.98); opacity: 0.36; } 50% { transform: scale(1.08); opacity: 0.68; } } @keyframes supportAvatarImageBreathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.045); filter: brightness(1.08); } } @keyframes supportAvatarHalo { 0%, 100% { transform: scale(0.98); opacity: 0.22; box-shadow: 0 0 0 0 rgba(255, 210, 74, 0.16); } 50% { transform: scale(1.16); opacity: 0.66; box-shadow: 0 0 18px rgba(255, 210, 74, 0.24); } } @keyframes floatingSupportCardBreathe { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); } 50% { transform: translate3d(0, 0, 0) scale(1.025); filter: brightness(1.06); } } @keyframes supportLiveFlicker { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 210, 74, 0.32)) brightness(1); } 3% { opacity: 0.72; filter: drop-shadow(0 0 8px rgba(255, 210, 74, 0.18)) brightness(0.82); } 4% { opacity: 1; filter: drop-shadow(0 0 22px rgba(255, 219, 91, 0.55)) brightness(1.28); } 6% { opacity: 0.86; filter: drop-shadow(0 0 10px rgba(255, 210, 74, 0.22)) brightness(0.92); } 8%, 38% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 210, 74, 0.42)) brightness(1.06); } 41% { opacity: 0.78; filter: drop-shadow(0 0 7px rgba(255, 210, 74, 0.16)) brightness(0.84); } 42% { opacity: 1; filter: drop-shadow(0 0 24px rgba(255, 219, 91, 0.58)) brightness(1.22); } 45%, 74% { transform: translate(-50%, -50%) scale(1.025); opacity: 1; filter: drop-shadow(0 0 19px rgba(255, 210, 74, 0.40)) brightness(1.04); } 76% { opacity: 0.82; filter: drop-shadow(0 0 9px rgba(255, 210, 74, 0.18)) brightness(0.9); } 77%, 91% { opacity: 1; filter: drop-shadow(0 0 23px rgba(255, 219, 91, 0.5)) brightness(1.18); } } @keyframes supportAgentNeonFlicker { 0%, 21%, 25%, 55%, 100% { opacity: 1; } 22%, 56% { opacity: 0.74; } 23%, 57% { opacity: 0.96; } } @keyframes supportFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes supportOrbitDrift { 0% { transform: rotate(0deg) scale(1); } 18% { transform: rotate(42deg) scale(1.01); } 37% { transform: rotate(119deg) scale(.99); } 61% { transform: rotate(203deg) scale(1.015); } 82% { transform: rotate(294deg) scale(.995); } 100% { transform: rotate(360deg) scale(1); } } @keyframes supportOrbitCounterDrift { 0% { transform: rotate(0deg); } 18% { transform: rotate(-42deg); } 37% { transform: rotate(-119deg); } 61% { transform: rotate(-203deg); } 82% { transform: rotate(-294deg); } 100% { transform: rotate(-360deg); } } @keyframes supportIconFloat { 0%, 100% { margin-top: 0; transform: translateY(0); } 33% { margin-top: -4px; transform: translateY(-2px); } 68% { margin-top: 3px; transform: translateY(2px); } } @keyframes supportIconFloatA { 0%, 100% { transform: translate(-50%, 0) rotate(-1deg); } 38% { transform: translate(-50%, -7px) rotate(2deg); } 72% { transform: translate(-50%, 4px) rotate(-2deg); } } @keyframes supportIconFloatB { 0%, 100% { transform: translate(0, -50%) rotate(1deg); } 31% { transform: translate(4px, calc(-50% - 5px)) rotate(-2deg); } 66% { transform: translate(-3px, calc(-50% + 4px)) rotate(2deg); } } @keyframes supportIconFloatC { 0%, 100% { transform: translate(-50%, 0) rotate(1deg); } 42% { transform: translate(calc(-50% - 3px), 6px) rotate(-2deg); } 74% { transform: translate(calc(-50% + 4px), -4px) rotate(2deg); } } @keyframes supportIconFloatD { 0%, 100% { transform: translate(0, -50%) rotate(-1deg); } 35% { transform: translate(-4px, calc(-50% + 5px)) rotate(2deg); } 70% { transform: translate(3px, calc(-50% - 4px)) rotate(-2deg); } } @keyframes supportSquareFloatTop { 0%, 100% { transform: translate(-50%, 0) rotate(-2deg); } 35% { transform: translate(calc(-50% + 2px), -7px) rotate(3deg); } 70% { transform: translate(calc(-50% - 3px), 4px) rotate(-4deg); } } @keyframes supportSquareFloatRight { 0%, 100% { transform: translate(0, -50%) rotate(2deg); } 32% { transform: translate(5px, calc(-50% - 4px)) rotate(-3deg); } 74% { transform: translate(-3px, calc(-50% + 5px)) rotate(4deg); } } @keyframes supportSquareFloatBottom { 0%, 100% { transform: translate(-50%, 0) rotate(2deg); } 40% { transform: translate(calc(-50% - 4px), 6px) rotate(-4deg); } 78% { transform: translate(calc(-50% + 3px), -4px) rotate(3deg); } } @keyframes supportSquareFloatLeft { 0%, 100% { transform: translate(0, -50%) rotate(-2deg); } 36% { transform: translate(-5px, calc(-50% + 4px)) rotate(4deg); } 68% { transform: translate(4px, calc(-50% - 5px)) rotate(-3deg); } } @keyframes supportSquareSpinTop { 0%, 100% { transform: translate(-50%, 0) rotate(0deg); } 25% { transform: translate(-50%, -2px) rotate(8deg); } 50% { transform: translate(-50%, 0) rotate(0deg); } 75% { transform: translate(-50%, 2px) rotate(-8deg); } } @keyframes supportSquareSpinRight { 0%, 100% { transform: translate(0, -50%) rotate(0deg); } 25% { transform: translate(1px, -50%) rotate(-8deg); } 50% { transform: translate(0, -50%) rotate(0deg); } 75% { transform: translate(-1px, -50%) rotate(8deg); } } @keyframes supportSquareSpinBottom { 0%, 100% { transform: translate(-50%, 0) rotate(0deg); } 25% { transform: translate(-50%, 2px) rotate(8deg); } 50% { transform: translate(-50%, 0) rotate(0deg); } 75% { transform: translate(-50%, -2px) rotate(-8deg); } } @keyframes supportSquareSpinLeft { 0%, 100% { transform: translate(0, -50%) rotate(0deg); } 25% { transform: translate(-1px, -50%) rotate(-8deg); } 50% { transform: translate(0, -50%) rotate(0deg); } 75% { transform: translate(1px, -50%) rotate(8deg); } } @keyframes supportOrbitSpinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes supportOrbitCounterSpinSlow { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .provider-card-sun:nth-child(even) .provider-card-inner::after { animation-delay: 1.5s; } /* Hover: warm lift + stronger glow */ .provider-card-sun:hover .provider-card-inner { border-color: rgba(227, 192, 74, 0.5) !important; box-shadow: 0 8px 25px rgba(227, 192, 74, 0.25), 0 0 20px rgba(201, 162, 39, 0.1) !important; animation: none; transform: translateY(-3px); } .provider-card-sun:hover .provider-card-inner::before { animation: none; opacity: 0; } /* Active press */ .provider-card-sun:active .provider-card-inner { transform: translateY(0) scale(0.97); } .provider-card-sun .provider-card-icon { border-radius: 12px; box-shadow: 0 0 10px rgba(201, 162, 39, 0.3); } .provider-card-sun .provider-card-img { border-radius: 12px; } /* Moon theme - frosted glass pill */ .provider-card-moon .provider-card-inner { border-radius: 20px; backdrop-filter: blur(10px); background: linear-gradient(135deg, rgba(10,10,31,0.8), rgba(26,26,62,0.6)) !important; border: 1px solid rgba(192,192,192,0.15) !important; } .provider-card-moon .provider-card-icon { border-radius: 50%; box-shadow: 0 0 12px rgba(192, 192, 192, 0.3); } /* Mercury theme - cyber neon border */ .provider-card-mercury .provider-card-inner { border-radius: 4px; border: 1px solid rgba(0, 229, 255, 0.4) !important; box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.05), 0 0 10px rgba(0, 229, 255, 0.15); } .provider-card-mercury .provider-card-icon { border-radius: 4px; border: 1px solid rgba(0, 229, 255, 0.3); } /* Venus theme - luxury rounded with gold accent */ .provider-card-venus .provider-card-inner { border-radius: 24px; border: 1px solid rgba(255, 105, 180, 0.2) !important; } .provider-card-venus .provider-card-icon { border-radius: 50%; width: 52px; height: 52px; box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3); } /* Earth theme - organic leaf shape */ .provider-card-earth .provider-card-inner { border-radius: 20px 4px 20px 4px; border: 1px solid rgba(0, 200, 83, 0.2) !important; } .provider-card-earth .provider-card-icon { border-radius: 12px 4px 12px 4px; box-shadow: 0 4px 12px rgba(0, 200, 83, 0.25); } /* Mars theme - sharp tactical cut corners */ .provider-card-mars .provider-card-inner { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-radius: 0; aspect-ratio: auto; padding: 18px 10px; } .provider-card-mars .provider-card-icon { border-radius: 2px; box-shadow: 0 0 10px rgba(255, 61, 0, 0.4); } /* Jupiter theme - ornate double border */ .provider-card-jupiter .provider-card-inner { border-radius: 16px; border: 2px solid rgba(212, 191, 116, 0.3) !important; box-shadow: inset 0 0 0 3px rgba(15, 12, 2, 0.8), inset 0 0 0 4px rgba(212, 191, 116, 0.15); } .provider-card-jupiter .provider-card-icon { border-radius: 50%; border: 2px solid rgba(212, 191, 116, 0.3); } /* Saturn theme - ring accent */ .provider-card-saturn .provider-card-inner { border-radius: 16px; border: 1px solid rgba(255, 210, 74, 0.25) !important; position: relative; overflow: visible; } .provider-card-saturn .provider-card-icon { border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 210, 74, 0.15), 0 0 15px rgba(255, 210, 74, 0.2); } /* ======================================== Desktop Responsive (768px+) ======================================== */ @media (min-width: 768px) { /* Widen content area */ #app-main { max-width: 960px !important; } /* Widen header content */ #app-header > div { max-width: 960px !important; } /* Desktop: keep bottom nav, center and match #app-main width */ #bottom-nav { width: 100% !important; max-width: 960px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); border-radius: 16px 16px 0 0; } /* Chat input bars stay above bottom-nav, match nav width */ #chat-input-bar, #chat-waiting-input-bar { width: 100% !important; max-width: 960px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); } /* Game grid - more columns */ .grid.grid-cols-2 { grid-template-columns: repeat(3, 1fr) !important; } /* Provider grid - more columns */ .grid.grid-cols-3 { grid-template-columns: repeat(4, 1fr) !important; } /* Quick actions - keep 4 cols but bigger */ .grid.grid-cols-4 { max-width: 500px; } /* Banner full width */ #home-banner { max-width: 960px; margin: 0 auto; } /* Custom banners max width */ #home-custom-banners { max-width: 960px; margin-left: auto; margin-right: auto; } } /* Extra wide screens (1200px+) */ @media (min-width: 1200px) { #app-main { max-width: 1100px !important; } #app-header > div { max-width: 1100px !important; } #home-banner { max-width: 1100px; } .grid.grid-cols-2 { grid-template-columns: repeat(4, 1fr) !important; } .grid.grid-cols-3 { grid-template-columns: repeat(5, 1fr) !important; } /* Bottom nav + chat input bars widen with #app-main */ #bottom-nav, #chat-input-bar, #chat-waiting-input-bar { max-width: 1100px !important; } } /* Hide placeholder banners */ .desktop-right-banner { display: none !important; } .registration-sms-disabled [data-registration-sms] { display: none !important; }