Spaces:
Sleeping
Sleeping
| /* ======================================== | |
| NOVA AI GAMES - Modals & Overlays | |
| Mode Selection, Pregame, Ads, Daily Bonus | |
| ======================================== */ | |
| /* Mode Selection Screen */ | |
| .mode-selection { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-lg); | |
| padding: var(--spacing-xl); | |
| min-height: 100vh; | |
| justify-content: center; | |
| } | |
| .mode-header { | |
| text-align: center; | |
| margin-bottom: var(--spacing-xl); | |
| padding: var(--spacing-lg); | |
| } | |
| .mode-header h1 { | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .mode-header p { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| /* Welcome Logo & Banner */ | |
| .welcome-logo { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 24px; | |
| margin-bottom: var(--spacing-md); | |
| box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4); | |
| animation: logoFloat 3s ease-in-out infinite; | |
| } | |
| @keyframes logoFloat { | |
| 0%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .welcome-banner { | |
| width: 100%; | |
| max-width: 320px; | |
| border-radius: var(--radius-lg); | |
| margin-bottom: var(--spacing-lg); | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* Mode Cards */ | |
| .mode-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-xl); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| border: 2px solid transparent; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .mode-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .mode-card.learn { | |
| border-color: rgba(34, 197, 94, 0.3); | |
| } | |
| .mode-card.learn:hover { | |
| border-color: var(--success); | |
| box-shadow: 0 0 30px rgba(34, 197, 94, 0.2); | |
| } | |
| .mode-card.earn { | |
| border-color: rgba(245, 158, 11, 0.3); | |
| } | |
| .mode-card.earn:hover { | |
| border-color: var(--warning); | |
| box-shadow: 0 0 30px rgba(245, 158, 11, 0.2); | |
| } | |
| .mode-icon { | |
| font-size: 48px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .mode-card h2 { | |
| font-size: 20px; | |
| font-weight: 700; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .mode-card p { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .mode-features { | |
| text-align: left; | |
| font-size: 13px; | |
| } | |
| .mode-features li { | |
| padding: 4px 0; | |
| color: var(--text-secondary); | |
| } | |
| .mode-badge { | |
| position: absolute; | |
| top: var(--spacing-md); | |
| right: var(--spacing-md); | |
| padding: 4px 10px; | |
| border-radius: var(--radius-sm); | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .mode-card.learn .mode-badge { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: var(--success); | |
| } | |
| .mode-card.earn .mode-badge { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--warning); | |
| } | |
| .earn-lock-notice { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| margin-top: var(--spacing-md); | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: rgba(239, 68, 68, 0.2); | |
| border-radius: var(--radius-sm); | |
| font-size: 12px; | |
| color: #fca5a5; | |
| } | |
| .lock-icon { | |
| font-size: 14px; | |
| } | |
| /* Pre-Game Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.85); | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| animation: fadeIn 0.2s ease; | |
| } | |
| .pregame-modal-content { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-xl); | |
| max-width: 340px; | |
| width: 90%; | |
| text-align: center; | |
| position: relative; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); | |
| animation: slideUp 0.3s ease; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(50px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .pregame-modal-content h2 { | |
| font-size: 20px; | |
| margin-bottom: var(--spacing-sm); | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .pregame-modal-content>p { | |
| color: var(--text-secondary); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .pregame-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .pregame-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: var(--spacing-lg); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-lg); | |
| background: var(--bg-glass); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .pregame-btn:hover { | |
| border-color: var(--accent-primary); | |
| transform: scale(1.02); | |
| } | |
| .pregame-btn.learn:hover { | |
| border-color: var(--success); | |
| background: rgba(34, 197, 94, 0.1); | |
| } | |
| .pregame-btn.earn:hover { | |
| border-color: #fbbf24; | |
| background: rgba(245, 158, 11, 0.1); | |
| } | |
| .pregame-btn.earn.disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| } | |
| .pregame-icon { | |
| font-size: 32px; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .pregame-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .pregame-desc { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .pregame-earn-locked { | |
| background: rgba(239, 68, 68, 0.1); | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-md); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .pregame-earn-locked p { | |
| font-size: 13px; | |
| color: #fca5a5; | |
| margin: 0; | |
| } | |
| .days-remaining { | |
| font-weight: 600; | |
| margin-top: var(--spacing-xs) ; | |
| } | |
| .pregame-close { | |
| position: absolute; | |
| top: var(--spacing-md); | |
| right: var(--spacing-md); | |
| width: 32px; | |
| height: 32px; | |
| border: none; | |
| background: var(--bg-glass); | |
| color: var(--text-secondary); | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .pregame-close:hover { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--error); | |
| } | |
| /* Ad Overlay */ | |
| .ad-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.95); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 400; | |
| padding: var(--spacing-lg); | |
| } | |
| .ad-container { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-xl); | |
| width: 100%; | |
| max-width: 340px; | |
| overflow: hidden; | |
| } | |
| .ad-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--spacing-md); | |
| background: var(--bg-card); | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .ad-timer { | |
| background: var(--accent-gradient); | |
| padding: 4px 12px; | |
| border-radius: var(--radius-full); | |
| font-weight: 700; | |
| color: white; | |
| } | |
| .ad-content { | |
| min-height: 250px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-glass); | |
| } | |
| .ad-reward { | |
| padding: var(--spacing-md); | |
| text-align: center; | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.1)); | |
| color: #fbbf24; | |
| font-weight: 600; | |
| } | |
| /* Daily Bonus Popup */ | |
| .daily-bonus-popup { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 300; | |
| padding: var(--spacing-lg); | |
| } | |
| .daily-bonus-content { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-xl); | |
| max-width: 340px; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .daily-bonus-content h2 { | |
| font-size: 24px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .streak-days { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .streak-day { | |
| width: 40px; | |
| height: 50px; | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| .streak-day.active { | |
| background: var(--accent-gradient); | |
| } | |
| .streak-day.claimed { | |
| background: rgba(34, 197, 94, 0.3); | |
| border: 1px solid var(--success); | |
| } | |
| .streak-day .day-num { | |
| font-weight: 700; | |
| } | |
| .streak-day .day-coins { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| } | |
| .bonus-reward { | |
| font-size: 48px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .bonus-coins { | |
| font-size: 32px; | |
| font-weight: 800; | |
| color: #fbbf24; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| /* Missions Section */ | |
| .missions-section { | |
| padding: var(--spacing-lg); | |
| } | |
| .missions-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .missions-header h3 { | |
| font-size: 18px; | |
| } | |
| .missions-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-sm); | |
| } | |
| .mission-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-md); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| transition: all var(--transition-fast); | |
| } | |
| .mission-card.complete { | |
| border: 1px solid var(--success); | |
| background: rgba(34, 197, 94, 0.1); | |
| } | |
| .mission-card.claimed { | |
| opacity: 0.5; | |
| } | |
| .mission-icon { | |
| font-size: 28px; | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-md); | |
| } | |
| .mission-info { | |
| flex: 1; | |
| } | |
| .mission-title { | |
| font-weight: 600; | |
| font-size: 14px; | |
| margin-bottom: 2px; | |
| } | |
| .mission-desc { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-bottom: 6px; | |
| } | |
| .mission-progress { | |
| height: 4px; | |
| background: var(--bg-glass); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .mission-progress-fill { | |
| height: 100%; | |
| background: var(--accent-gradient); | |
| transition: width 0.3s ease; | |
| } | |
| .mission-reward { | |
| padding: 6px 12px; | |
| background: rgba(245, 158, 11, 0.2); | |
| border-radius: var(--radius-sm); | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: #fbbf24; | |
| } | |
| .mission-claim-btn { | |
| padding: 8px 16px; | |
| background: var(--accent-gradient); | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .mission-claim-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Coin Exchange */ | |
| .exchange-section { | |
| padding: var(--spacing-lg); | |
| } | |
| .exchange-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-xl); | |
| text-align: center; | |
| } | |
| .exchange-rate { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-md); | |
| margin: var(--spacing-lg) 0; | |
| font-size: 24px; | |
| } | |
| .exchange-arrow { | |
| color: var(--text-secondary); | |
| } | |
| .exchange-input { | |
| background: var(--bg-glass); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-md); | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: white; | |
| text-align: center; | |
| width: 100%; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .exchange-result { | |
| font-size: 18px; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .exchange-result span { | |
| color: #fbbf24; | |
| font-weight: 700; | |
| } | |
| /* ======================================== | |
| BONUS ADS SECTION | |
| ======================================== */ | |
| .bonus-ads-section { | |
| margin-top: var(--spacing-xl); | |
| display: block; | |
| } | |
| .bonus-ads-section h3 { | |
| font-size: 16px; | |
| margin-bottom: var(--spacing-md); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .bonus-ads-card { | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 179, 8, 0.08)); | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-lg); | |
| text-align: center; | |
| } | |
| .bonus-ads-info { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .bonus-stat { | |
| text-align: center; | |
| } | |
| .bonus-stat-value { | |
| display: block; | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: #fbbf24; | |
| } | |
| .bonus-stat-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .bonus-ads-timer { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .bonus-watch-btn { | |
| width: 100%; | |
| padding: var(--spacing-md); | |
| background: linear-gradient(135deg, #f59e0b, #d97706); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| color: white; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .bonus-watch-btn:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4); | |
| } | |
| .bonus-watch-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .bonus-reward-hint { | |
| margin-top: var(--spacing-md); | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| /* Ad Progress Bar */ | |
| .ad-progress { | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| margin-top: var(--spacing-md); | |
| overflow: hidden; | |
| } | |
| .ad-progress-bar { | |
| height: 100%; | |
| background: var(--accent-gradient); | |
| width: 0%; | |
| transition: width 0.3s linear; | |
| } | |
| .bonus-progress { | |
| background: linear-gradient(90deg, #f59e0b, #fbbf24); | |
| } | |
| /* Bonus Ad Overlay Enhancements */ | |
| .bonus-ad-container { | |
| border: 2px solid rgba(245, 158, 11, 0.5); | |
| } | |
| .bonus-reward { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-xs); | |
| } | |
| .bonus-coins-display { | |
| font-size: 24px; | |
| font-weight: 800; | |
| color: #fbbf24; | |
| } | |
| .bonus-hint { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } |