Spaces:
Sleeping
Sleeping
| /* ======================================== | |
| NOVA AI GAMES - Main Stylesheet | |
| ======================================== */ | |
| /* CSS Variables - Dark Theme */ | |
| :root { | |
| /* Colors */ | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-tertiary: #1a1a25; | |
| --bg-card: rgba(30, 30, 45, 0.8); | |
| --bg-glass: rgba(255, 255, 255, 0.05); | |
| /* Accent Colors */ | |
| --accent-primary: #6366f1; | |
| --accent-secondary: #8b5cf6; | |
| --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); | |
| --accent-glow: rgba(99, 102, 241, 0.4); | |
| /* Text Colors */ | |
| --text-primary: #ffffff; | |
| --text-secondary: rgba(255, 255, 255, 0.7); | |
| --text-muted: rgba(255, 255, 255, 0.4); | |
| /* Status Colors */ | |
| --success: #22c55e; | |
| --warning: #f59e0b; | |
| --error: #ef4444; | |
| --info: #3b82f6; | |
| /* Difficulty Colors */ | |
| --easy: #22c55e; | |
| --medium: #f59e0b; | |
| --hard: #ef4444; | |
| /* Spacing */ | |
| --spacing-xs: 4px; | |
| --spacing-sm: 8px; | |
| --spacing-md: 16px; | |
| --spacing-lg: 24px; | |
| --spacing-xl: 32px; | |
| /* Border Radius */ | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| --radius-full: 50%; | |
| /* Shadows */ | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 20px var(--accent-glow); | |
| /* Transitions */ | |
| --transition-fast: 0.15s ease; | |
| --transition-normal: 0.3s ease; | |
| --transition-slow: 0.5s ease; | |
| /* Safe Areas */ | |
| --safe-top: env(safe-area-inset-top, 0px); | |
| --safe-bottom: env(safe-area-inset-bottom, 0px); | |
| } | |
| /* ======================================== | |
| Reset & Base Styles | |
| ======================================== */ | |
| *, | |
| *::before, | |
| *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| line-height: 1.5; | |
| } | |
| #app { | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* ======================================== | |
| Screen Management | |
| ======================================== */ | |
| .screen { | |
| display: none; | |
| min-height: 100vh; | |
| flex-direction: column; | |
| padding-bottom: 80px; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .screen.active { | |
| display: flex; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ======================================== | |
| Loading Screen | |
| ======================================== */ | |
| #loading-screen { | |
| justify-content: center; | |
| align-items: center; | |
| background: radial-gradient(ellipse at center, var(--bg-secondary) 0%, var(--bg-primary) 100%); | |
| } | |
| .loader-container { | |
| text-align: center; | |
| } | |
| .brain-icon { | |
| font-size: 64px; | |
| animation: pulse 2s ease infinite; | |
| } | |
| .loader-ring { | |
| width: 100px; | |
| height: 100px; | |
| border: 3px solid var(--bg-tertiary); | |
| border-top-color: var(--accent-primary); | |
| border-radius: 50%; | |
| margin: 20px auto; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| } | |
| } | |
| .loader-container h2 { | |
| font-size: 24px; | |
| font-weight: 700; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 8px; | |
| } | |
| .loader-container p { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| /* ======================================== | |
| Glass Card Effect | |
| ======================================== */ | |
| .glass-card { | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-lg); | |
| } | |
| /* ======================================== | |
| App Header | |
| ======================================== */ | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--spacing-lg); | |
| padding-top: calc(var(--spacing-lg) + var(--safe-top)); | |
| background: linear-gradient(to bottom, var(--bg-secondary), transparent); | |
| } | |
| .app-header.simple { | |
| justify-content: center; | |
| } | |
| .app-header.simple h1 { | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| } | |
| .avatar { | |
| width: 48px; | |
| height: 48px; | |
| background: var(--accent-gradient); | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .user-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .user-name { | |
| font-weight: 600; | |
| font-size: 16px; | |
| } | |
| .user-level { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .header-stats { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| } | |
| .stat-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| background: var(--bg-glass); | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| border-radius: var(--radius-md); | |
| } | |
| .stat-icon { | |
| font-size: 16px; | |
| } | |
| .stat-value { | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| /* ======================================== | |
| Home Content | |
| ======================================== */ | |
| .home-content { | |
| padding: 0 var(--spacing-lg); | |
| flex: 1; | |
| } | |
| /* Daily Challenge */ | |
| .daily-challenge { | |
| margin-bottom: var(--spacing-xl); | |
| } | |
| .challenge-card { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1)); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .challenge-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%); | |
| animation: shimmer 3s ease infinite; | |
| } | |
| @keyframes shimmer { | |
| 0%, | |
| 100% { | |
| transform: translate(0, 0); | |
| } | |
| 50% { | |
| transform: translate(-20%, 20%); | |
| } | |
| } | |
| .challenge-badge { | |
| display: inline-block; | |
| background: var(--accent-gradient); | |
| padding: var(--spacing-xs) var(--spacing-md); | |
| border-radius: var(--radius-md); | |
| font-size: 12px; | |
| font-weight: 600; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .challenge-card h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .challenge-progress { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| } | |
| .progress-bar { | |
| flex: 1; | |
| height: 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--accent-gradient); | |
| border-radius: var(--radius-full); | |
| transition: width var(--transition-normal); | |
| } | |
| .challenge-progress span { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| } | |
| /* Games Section */ | |
| .games-section h2 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .games-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| } | |
| .game-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .game-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--accent-gradient); | |
| opacity: 0; | |
| transition: opacity var(--transition-normal); | |
| } | |
| .game-card:hover::before, | |
| .game-card:active::before { | |
| opacity: 0.1; | |
| } | |
| .game-card:active { | |
| transform: scale(0.98); | |
| } | |
| .game-icon { | |
| width: 56px; | |
| height: 56px; | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 28px; | |
| flex-shrink: 0; | |
| } | |
| .game-card h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .game-card p { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .game-meta { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| } | |
| .difficulty { | |
| font-size: 11px; | |
| padding: 2px 8px; | |
| border-radius: var(--radius-sm); | |
| font-weight: 500; | |
| } | |
| .difficulty.easy { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: var(--easy); | |
| } | |
| .difficulty.medium { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--medium); | |
| } | |
| .difficulty.hard { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--hard); | |
| } | |
| .duration { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| /* ======================================== | |
| Bottom Navigation | |
| ======================================== */ | |
| .bottom-nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| display: flex; | |
| justify-content: space-around; | |
| background: rgba(18, 18, 26, 0.95); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| padding: var(--spacing-sm); | |
| padding-bottom: calc(var(--spacing-sm) + var(--safe-bottom)); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| z-index: 100; | |
| } | |
| .nav-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| border-radius: var(--radius-md); | |
| } | |
| .nav-btn.active { | |
| color: var(--accent-primary); | |
| } | |
| .nav-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .nav-icon { | |
| font-size: 22px; | |
| } | |
| .nav-label { | |
| font-size: 11px; | |
| font-weight: 500; | |
| } | |
| /* ======================================== | |
| Game Screen | |
| ======================================== */ | |
| .game-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--spacing-lg); | |
| padding-top: calc(var(--spacing-lg) + var(--safe-top)); | |
| background: var(--bg-secondary); | |
| } | |
| .back-btn { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--bg-glass); | |
| border: none; | |
| border-radius: var(--radius-full); | |
| color: var(--text-primary); | |
| font-size: 20px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .back-btn:active { | |
| transform: scale(0.9); | |
| } | |
| .game-info h2 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .game-timer { | |
| font-size: 18px; | |
| font-weight: 700; | |
| font-variant-numeric: tabular-nums; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .game-container { | |
| flex: 1; | |
| padding: var(--spacing-lg); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .game-score-bar { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-xl); | |
| padding: var(--spacing-md); | |
| background: var(--bg-secondary); | |
| } | |
| .score-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .score-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .score-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| /* ======================================== | |
| Result Screen | |
| ======================================== */ | |
| #result-screen { | |
| justify-content: center; | |
| align-items: center; | |
| background: radial-gradient(ellipse at center, var(--bg-secondary) 0%, var(--bg-primary) 100%); | |
| padding: var(--spacing-xl); | |
| } | |
| .result-container { | |
| text-align: center; | |
| max-width: 320px; | |
| width: 100%; | |
| } | |
| .result-icon { | |
| font-size: 80px; | |
| margin-bottom: var(--spacing-md); | |
| animation: bounceIn 0.6s ease; | |
| } | |
| @keyframes bounceIn { | |
| 0% { | |
| transform: scale(0); | |
| } | |
| 50% { | |
| transform: scale(1.2); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| #result-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .result-score { | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-lg); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .result-label { | |
| display: block; | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .result-value { | |
| font-size: 48px; | |
| font-weight: 800; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .result-stats { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: var(--spacing-xl); | |
| } | |
| .result-stat { | |
| text-align: center; | |
| } | |
| .result-stat .stat-label { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-bottom: 4px; | |
| } | |
| .result-stat .stat-value { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .result-actions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| padding: var(--spacing-md) var(--spacing-xl); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-primary { | |
| background: var(--accent-gradient); | |
| color: white; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-glass); | |
| color: var(--text-primary); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* ======================================== | |
| Stats Screen | |
| ======================================== */ | |
| .stats-content { | |
| padding: var(--spacing-lg); | |
| padding-top: 0; | |
| } | |
| .stats-overview { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .overview-stat { | |
| text-align: center; | |
| } | |
| .overview-value { | |
| display: block; | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .overview-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .stats-chart { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .stats-chart h3 { | |
| font-size: 16px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .chart-bars { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| height: 120px; | |
| padding-top: var(--spacing-md); | |
| } | |
| .chart-bar { | |
| flex: 1; | |
| margin: 0 4px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-sm) var(--radius-sm) 0 0; | |
| height: var(--height); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| align-items: center; | |
| position: relative; | |
| transition: all var(--transition-normal); | |
| } | |
| .chart-bar::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--accent-gradient); | |
| opacity: 0.6; | |
| border-radius: inherit; | |
| } | |
| .chart-bar.today::before { | |
| opacity: 1; | |
| } | |
| .chart-bar span { | |
| position: absolute; | |
| bottom: -24px; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .game-stats h3 { | |
| font-size: 16px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .game-stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-sm); | |
| padding: var(--spacing-md); | |
| } | |
| .game-stat-icon { | |
| font-size: 28px; | |
| } | |
| .game-stat-info { | |
| flex: 1; | |
| } | |
| .game-stat-info h4 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .game-stat-info p { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .game-stat-level { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--accent-primary); | |
| } | |
| /* ======================================== | |
| Leaderboard Screen | |
| ======================================== */ | |
| .leaderboard-content { | |
| padding: var(--spacing-lg); | |
| padding-top: 0; | |
| } | |
| .leaderboard-tabs { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .tab-btn { | |
| flex: 1; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: var(--bg-glass); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .tab-btn.active { | |
| background: var(--accent-gradient); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| .top-players { | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-xl); | |
| padding: var(--spacing-lg) 0; | |
| } | |
| .top-player { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .top-player .player-avatar { | |
| width: 56px; | |
| height: 56px; | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 28px; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .top-player.first .player-avatar { | |
| width: 72px; | |
| height: 72px; | |
| font-size: 36px; | |
| background: linear-gradient(135deg, #ffd700, #ffb700); | |
| box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); | |
| } | |
| .top-player.second .player-avatar { | |
| background: linear-gradient(135deg, #c0c0c0, #a0a0a0); | |
| } | |
| .top-player.third .player-avatar { | |
| background: linear-gradient(135deg, #cd7f32, #b06c2a); | |
| } | |
| .top-player .player-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .top-player .player-score { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .leaderboard-list { | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .leaderboard-item { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--spacing-md); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .leaderboard-item:last-child { | |
| border-bottom: none; | |
| } | |
| .leaderboard-item.you { | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .leaderboard-item .rank { | |
| width: 32px; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| } | |
| .leaderboard-item .player-name { | |
| flex: 1; | |
| font-weight: 500; | |
| } | |
| .leaderboard-item .player-score { | |
| font-weight: 600; | |
| color: var(--accent-primary); | |
| } | |
| /* ======================================== | |
| Profile Screen | |
| ======================================== */ | |
| .profile-content { | |
| padding: var(--spacing-lg); | |
| padding-top: 0; | |
| } | |
| .profile-card { | |
| text-align: center; | |
| margin-bottom: var(--spacing-xl); | |
| } | |
| .profile-avatar { | |
| width: 80px; | |
| height: 80px; | |
| background: var(--accent-gradient); | |
| border-radius: var(--radius-full); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 40px; | |
| margin: 0 auto var(--spacing-md); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .profile-card h2 { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .profile-joined { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .achievements-section { | |
| margin-bottom: var(--spacing-xl); | |
| } | |
| .achievements-section h3 { | |
| font-size: 16px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .achievements-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: var(--spacing-sm); | |
| } | |
| .achievement { | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-md); | |
| text-align: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .achievement.locked { | |
| opacity: 0.4; | |
| } | |
| .achievement-icon { | |
| font-size: 28px; | |
| display: block; | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .achievement-name { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .settings-section h3 { | |
| font-size: 16px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .settings-list { | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--spacing-md); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .setting-item:last-child { | |
| border-bottom: none; | |
| } | |
| .setting-item span { | |
| font-size: 14px; | |
| } | |
| /* Toggle Switch */ | |
| .toggle { | |
| position: relative; | |
| width: 48px; | |
| height: 28px; | |
| } | |
| .toggle input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| inset: 0; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .toggle-slider::before { | |
| content: ''; | |
| position: absolute; | |
| width: 22px; | |
| height: 22px; | |
| left: 3px; | |
| top: 3px; | |
| background: white; | |
| border-radius: var(--radius-full); | |
| transition: all var(--transition-fast); | |
| } | |
| .toggle input:checked+.toggle-slider { | |
| background: var(--accent-gradient); | |
| } | |
| .toggle input:checked+.toggle-slider::before { | |
| transform: translateX(20px); | |
| } | |
| /* ======================================== | |
| Memory Game Styles - Enhanced 3D | |
| ======================================== */ | |
| .memory-game-wrapper { | |
| width: 100%; | |
| max-width: 340px; | |
| position: relative; | |
| } | |
| .memory-grid-enhanced { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| perspective: 1000px; | |
| } | |
| .memory-card-3d { | |
| aspect-ratio: 1; | |
| cursor: pointer; | |
| position: relative; | |
| transform-style: preserve-3d; | |
| animation: cardEntrance 0.5s ease backwards; | |
| } | |
| @keyframes cardEntrance { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.5) rotateY(180deg); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1) rotateY(0); | |
| } | |
| } | |
| .memory-card-3d .card-inner { | |
| position: absolute; | |
| inset: 0; | |
| transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| } | |
| .memory-card-3d.flipped .card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .memory-card-3d .card-face { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| backface-visibility: hidden; | |
| border-radius: var(--radius-md); | |
| font-size: 28px; | |
| } | |
| .memory-card-3d .card-front-3d { | |
| background: linear-gradient(145deg, #1e1e2e, #2a2a40); | |
| border: 2px solid rgba(99, 102, 241, 0.3); | |
| box-shadow: | |
| 0 4px 15px rgba(0, 0, 0, 0.3), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| overflow: hidden; | |
| } | |
| .memory-card-3d .card-pattern { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| repeating-linear-gradient(45deg, | |
| transparent, | |
| transparent 5px, | |
| rgba(99, 102, 241, 0.05) 5px, | |
| rgba(99, 102, 241, 0.05) 10px); | |
| } | |
| .memory-card-3d .card-question { | |
| position: relative; | |
| z-index: 1; | |
| font-size: 32px; | |
| color: var(--text-muted); | |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .memory-card-3d .card-back-3d { | |
| background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); | |
| transform: rotateY(180deg); | |
| box-shadow: | |
| 0 8px 25px rgba(99, 102, 241, 0.4), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.2); | |
| } | |
| .memory-card-3d .card-emoji { | |
| filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); | |
| animation: emojiPop 0.3s ease; | |
| } | |
| @keyframes emojiPop { | |
| 0% { | |
| transform: scale(0); | |
| } | |
| 50% { | |
| transform: scale(1.2); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .memory-card-3d:hover:not(.flipped):not(.matched) { | |
| transform: translateY(-3px); | |
| } | |
| .memory-card-3d:hover:not(.flipped):not(.matched) .card-front-3d { | |
| border-color: rgba(99, 102, 241, 0.6); | |
| box-shadow: | |
| 0 8px 25px rgba(99, 102, 241, 0.3), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| } | |
| .memory-card-3d.matched .card-inner { | |
| animation: matchCelebrate 0.5s ease; | |
| } | |
| @keyframes matchCelebrate { | |
| 0%, | |
| 100% { | |
| transform: rotateY(180deg) scale(1); | |
| } | |
| 50% { | |
| transform: rotateY(180deg) scale(1.1); | |
| } | |
| } | |
| .memory-card-3d.matched .card-back-3d { | |
| background: linear-gradient(135deg, #22c55e, #16a34a); | |
| box-shadow: | |
| 0 8px 30px rgba(34, 197, 94, 0.5), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.2); | |
| } | |
| .memory-moves { | |
| text-align: center; | |
| margin-top: var(--spacing-lg); | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .moves-value { | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| margin-left: 4px; | |
| } | |
| /* Particle Effects */ | |
| .particles-container { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| animation: particleFloat 0.8s ease-out forwards; | |
| } | |
| @keyframes particleFloat { | |
| 0% { | |
| opacity: 1; | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translate(var(--tx), var(--ty)) scale(0); | |
| } | |
| } | |
| /* ======================================== | |
| Pattern Game Styles | |
| ======================================== */ | |
| .pattern-display { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--spacing-md); | |
| max-width: 280px; | |
| width: 100%; | |
| margin-bottom: var(--spacing-xl); | |
| } | |
| .pattern-cell { | |
| aspect-ratio: 1; | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .pattern-cell.active { | |
| background: var(--accent-gradient); | |
| box-shadow: var(--shadow-glow); | |
| transform: scale(1.05); | |
| } | |
| .pattern-cell.correct { | |
| background: var(--success); | |
| } | |
| .pattern-cell.wrong { | |
| background: var(--error); | |
| animation: shake 0.5s ease; | |
| } | |
| @keyframes shake { | |
| 0%, | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| 25% { | |
| transform: translateX(-8px); | |
| } | |
| 75% { | |
| transform: translateX(8px); | |
| } | |
| } | |
| .pattern-instruction { | |
| text-align: center; | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: var(--spacing-lg); | |
| min-height: 50px; | |
| } | |
| .pattern-level { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| /* ======================================== | |
| Math Game Styles | |
| ======================================== */ | |
| .math-container { | |
| text-align: center; | |
| max-width: 320px; | |
| width: 100%; | |
| } | |
| .math-problem { | |
| font-size: 48px; | |
| font-weight: 800; | |
| margin-bottom: var(--spacing-xl); | |
| min-height: 60px; | |
| } | |
| .math-options { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: var(--spacing-md); | |
| } | |
| .math-option { | |
| padding: var(--spacing-lg); | |
| background: var(--bg-glass); | |
| border: 2px solid transparent; | |
| border-radius: var(--radius-md); | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .math-option:active { | |
| transform: scale(0.95); | |
| } | |
| .math-option.correct { | |
| background: rgba(34, 197, 94, 0.2); | |
| border-color: var(--success); | |
| } | |
| .math-option.wrong { | |
| background: rgba(239, 68, 68, 0.2); | |
| border-color: var(--error); | |
| } | |
| .math-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-xl); | |
| margin-top: var(--spacing-xl); | |
| } | |
| .math-stat { | |
| text-align: center; | |
| } | |
| .math-stat-label { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .math-stat-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| /* ======================================== | |
| Word Scramble Game Styles | |
| ======================================== */ | |
| .word-container { | |
| text-align: center; | |
| max-width: 340px; | |
| width: 100%; | |
| } | |
| .word-instruction { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .word-instruction span { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .word-level { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-top: 4px; | |
| } | |
| .word-answer { | |
| min-height: 60px; | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-md); | |
| margin-bottom: var(--spacing-lg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| border: 2px solid transparent; | |
| transition: all var(--transition-fast); | |
| } | |
| .word-answer.correct { | |
| border-color: var(--success); | |
| background: rgba(34, 197, 94, 0.1); | |
| } | |
| .word-answer.wrong { | |
| border-color: var(--error); | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| .answer-letter { | |
| width: 40px; | |
| height: 48px; | |
| background: var(--accent-gradient); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: white; | |
| animation: letterPop 0.2s ease; | |
| } | |
| @keyframes letterPop { | |
| 0% { | |
| transform: scale(0); | |
| } | |
| 70% { | |
| transform: scale(1.1); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .answer-placeholder { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| } | |
| .word-scrambled { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .word-letter { | |
| width: 48px; | |
| height: 56px; | |
| background: linear-gradient(145deg, #1e1e2e, #2a2a40); | |
| border: 2px solid rgba(99, 102, 241, 0.4); | |
| border-radius: var(--radius-md); | |
| font-size: 26px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .word-letter:hover:not(.used) { | |
| border-color: var(--accent-primary); | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3); | |
| } | |
| .word-letter:active:not(.used) { | |
| transform: scale(0.95); | |
| } | |
| .word-letter.used { | |
| opacity: 0.3; | |
| cursor: not-allowed; | |
| transform: scale(0.9); | |
| } | |
| .word-actions { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| justify-content: center; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .word-btn { | |
| padding: var(--spacing-md) var(--spacing-xl); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .word-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .word-btn-clear { | |
| background: var(--bg-glass); | |
| color: var(--text-primary); | |
| } | |
| .word-btn-submit { | |
| background: var(--accent-gradient); | |
| color: white; | |
| } | |
| .word-btn-submit:not(:disabled):hover { | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .word-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-xl); | |
| } | |
| .word-stat { | |
| text-align: center; | |
| } | |
| .word-stat-label { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .word-stat-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| /* ======================================== | |
| Reaction Time Game Styles | |
| ======================================== */ | |
| .reaction-container { | |
| text-align: center; | |
| max-width: 340px; | |
| width: 100%; | |
| } | |
| .reaction-box { | |
| width: 100%; | |
| height: 280px; | |
| background: linear-gradient(145deg, #1e1e2e, #2a2a40); | |
| border-radius: var(--radius-xl); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 3px solid rgba(255, 255, 255, 0.1); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .reaction-container.waiting .reaction-box { | |
| background: linear-gradient(145deg, #b91c1c, #dc2626); | |
| border-color: #ef4444; | |
| animation: waitingPulse 1s infinite; | |
| } | |
| @keyframes waitingPulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.02); | |
| } | |
| } | |
| .reaction-container.ready .reaction-box { | |
| background: linear-gradient(145deg, #15803d, #22c55e); | |
| border-color: #22c55e; | |
| box-shadow: 0 0 40px rgba(34, 197, 94, 0.5); | |
| animation: readyGlow 0.3s ease; | |
| } | |
| @keyframes readyGlow { | |
| 0% { | |
| transform: scale(0.95); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .reaction-box.early { | |
| background: linear-gradient(145deg, #c2410c, #ea580c) ; | |
| border-color: #f97316 ; | |
| animation: shakeBox 0.5s ease; | |
| } | |
| @keyframes shakeBox { | |
| 0%, | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| 20% { | |
| transform: translateX(-10px); | |
| } | |
| 40% { | |
| transform: translateX(10px); | |
| } | |
| 60% { | |
| transform: translateX(-10px); | |
| } | |
| 80% { | |
| transform: translateX(10px); | |
| } | |
| } | |
| .reaction-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .reaction-icon { | |
| font-size: 64px; | |
| } | |
| .reaction-message { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: white; | |
| } | |
| .reaction-hint { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| max-width: 200px; | |
| } | |
| .reaction-progress { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .reaction-dot { | |
| width: 50px; | |
| height: 50px; | |
| background: var(--bg-glass); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| transition: all var(--transition-fast); | |
| } | |
| .reaction-dot.current { | |
| border: 2px solid var(--accent-primary); | |
| } | |
| .reaction-dot.completed { | |
| background: var(--accent-gradient); | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .reaction-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-xl); | |
| } | |
| .reaction-stat { | |
| text-align: center; | |
| } | |
| .reaction-stat-label { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .reaction-stat-value { | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| /* ======================================== | |
| Countdown Overlay | |
| ======================================== */ | |
| .countdown-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.9); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 200; | |
| } | |
| .countdown-number { | |
| font-size: 120px; | |
| font-weight: 800; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: countPulse 1s ease infinite; | |
| } | |
| @keyframes countPulse { | |
| 0% { | |
| transform: scale(0.5); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: scale(1.2); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| /* ======================================== | |
| Responsive Adjustments | |
| ======================================== */ | |
| @media (min-width: 768px) { | |
| .games-grid { | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| .game-card { | |
| flex: 1 1 calc(50% - var(--spacing-md)); | |
| } | |
| } | |
| /* ======================================== | |
| AI Indicator Badge | |
| ======================================== */ | |
| .ai-indicator { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .ai-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 14px; | |
| border-radius: var(--radius-full); | |
| font-size: 12px; | |
| font-weight: 600; | |
| animation: badgePulse 2s ease infinite; | |
| } | |
| .ai-badge:not(.local) { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3)); | |
| border: 1px solid rgba(139, 92, 246, 0.5); | |
| color: #a78bfa; | |
| box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); | |
| } | |
| .ai-badge.local { | |
| background: rgba(100, 116, 139, 0.2); | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| color: var(--text-secondary); | |
| } | |
| @keyframes badgePulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| /* ======================================== | |
| Mode Selection (Play to Learn / Earn) | |
| ======================================== */ | |
| .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); | |
| } | |
| .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; | |
| } | |
| .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); | |
| } | |
| /* ======================================== | |
| Coins Display | |
| ======================================== */ | |
| .coins-display { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.1)); | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| padding: 6px 12px; | |
| border-radius: var(--radius-full); | |
| font-weight: 600; | |
| color: #fbbf24; | |
| } | |
| .coins-display .coin-icon { | |
| font-size: 16px; | |
| } | |
| .coins-display .coin-amount { | |
| font-size: 14px; | |
| } | |
| /* ======================================== | |
| Daily Bonus | |
| ======================================== */ | |
| .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); | |
| } | |
| /* ======================================== | |
| 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; | |
| } | |
| /* ======================================== | |
| Missions | |
| ======================================== */ | |
| .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; | |
| } | |
| /* ======================================== | |
| Welcome Screen - 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-header { | |
| text-align: center; | |
| padding: var(--spacing-lg); | |
| } | |
| .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 Mode Selection 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); | |
| } | |
| /* ======================================== | |
| Result Screen - Coins & Ads | |
| ======================================== */ | |
| .result-coins-earned { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: var(--spacing-lg); | |
| padding: var(--spacing-md); | |
| background: rgba(245, 158, 11, 0.15); | |
| border-radius: var(--radius-md); | |
| animation: coinBounce 0.5s ease; | |
| } | |
| @keyframes coinBounce { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| } | |
| } | |
| .coins-earned-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .coins-earned-value { | |
| font-size: 28px; | |
| font-weight: 800; | |
| color: #fbbf24; | |
| } | |
| .result-ad-container { | |
| margin: var(--spacing-lg) 0; | |
| min-height: 100px; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| /* ======================================== | |
| Enhanced Leaderboard | |
| ======================================== */ | |
| .your-rank-card { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-lg); | |
| padding: var(--spacing-lg); | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1)); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| } | |
| .your-rank-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| } | |
| .your-rank-avatar { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: var(--radius-full); | |
| background: var(--bg-glass); | |
| object-fit: cover; | |
| } | |
| .your-rank-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .your-rank-name { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .your-rank-username { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .your-rank-stats { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .rank-stat { | |
| text-align: center; | |
| } | |
| .rank-stat-value { | |
| display: block; | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| } | |
| .rank-stat-label { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .player-avatar-img { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius-full); | |
| object-fit: cover; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .top-player.first .player-avatar-img { | |
| width: 64px; | |
| height: 64px; | |
| border: 3px solid #ffd700; | |
| box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); | |
| } | |
| .player-medal { | |
| font-size: 20px; | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .player-level { | |
| font-size: 11px; | |
| color: var(--accent-primary); | |
| margin-bottom: 2px; | |
| } | |
| .leaderboard-loading { | |
| text-align: center; | |
| padding: var(--spacing-xl); | |
| color: var(--text-secondary); | |
| } | |
| .leaderboard-item .player-level { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| margin-left: var(--spacing-sm); | |
| } | |
| .leaderboard-item .player-avatar-small { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-full); | |
| margin-right: var(--spacing-sm); | |
| } | |
| /* ======================================== | |
| Referral Section | |
| ======================================== */ | |
| .referral-section { | |
| margin-top: var(--spacing-xl); | |
| } | |
| .referral-section h3 { | |
| font-size: 16px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .referral-card { | |
| text-align: center; | |
| } | |
| .referral-reward { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .referral-bonus { | |
| font-size: 28px; | |
| font-weight: 800; | |
| color: #fbbf24; | |
| } | |
| .referral-text { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .referral-code-box { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .referral-label { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .referral-code-display { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| background: var(--bg-tertiary); | |
| padding: var(--spacing-md); | |
| border-radius: var(--radius-md); | |
| } | |
| .referral-code { | |
| font-size: 20px; | |
| font-weight: 700; | |
| font-family: monospace; | |
| letter-spacing: 2px; | |
| color: var(--accent-primary); | |
| } | |
| .copy-btn { | |
| width: 36px; | |
| height: 36px; | |
| background: var(--accent-gradient); | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .copy-btn:active { | |
| transform: scale(0.9); | |
| } | |
| .referral-stats { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .referral-stat { | |
| text-align: center; | |
| } | |
| .referral-stat-value { | |
| display: block; | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--success); | |
| } | |
| .referral-stat-label { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .referral-share-btn { | |
| width: 100%; | |
| } | |
| /* Profile Avatar Image */ | |
| .profile-avatar-img { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: var(--radius-full); | |
| object-fit: cover; | |
| margin-bottom: var(--spacing-md); | |
| border: 3px solid var(--accent-primary); | |
| box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3); | |
| } | |
| .profile-avatar-fallback { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: var(--radius-full); | |
| background: var(--accent-gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 40px; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| /* Leaderboard Avatar Fallback */ | |
| .player-avatar-img { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius-full); | |
| object-fit: cover; | |
| margin-bottom: var(--spacing-sm); | |
| background: var(--bg-glass); | |
| } | |
| .player-avatar-img[src=""], | |
| .player-avatar-img:not([src]) { | |
| background: var(--accent-gradient); | |
| } | |
| .your-rank-avatar { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: var(--radius-full); | |
| background: var(--accent-gradient); | |
| object-fit: cover; | |
| } | |
| .your-rank-avatar[src=""], | |
| .your-rank-avatar:not([src]) { | |
| background: var(--accent-gradient); | |
| } |