/* ============================================ TryNowGames — Retention v3.2 Light/Dark Adaptive + Horizontal Recently Played Theme: data-theme="dark" on ============================================ */ /* === CSS VARIABLES — Light (Default) === */ :root { --ret-bg: #ffffff; --ret-card-bg: #f8f9fa; --ret-border: rgba(0,0,0,0.08); --ret-text: #2c3e50; --ret-text-dim: #7f8c8d; --ret-accent: #667eea; --ret-accent2: #764ba2; --ret-panel-bg: #ffffff; --ret-panel-border: rgba(0,0,0,0.1); --ret-stat-bg: #f0f2f5; --ret-streak-bg: #f8f9fa; --ret-streak-dot-bg: #e9ecef; --ret-streak-dot-active: linear-gradient(135deg, #667eea, #764ba2); --ret-reward-bg: #f0fdf4; --ret-reward-border: rgba(16, 185, 129, 0.2); --ret-ach-locked: 0.4; --ret-overlay-bg: rgba(0,0,0,0.3); --ret-rp-bg: #f0f2f5; --ret-rp-item-bg: #ffffff; } /* === Dark Mode === */ [data-theme="dark"] { --ret-bg: #0f0a2e; --ret-card-bg: rgba(255,255,255,0.04); --ret-border: rgba(103,126,234,0.15); --ret-text: #ffffff; --ret-text-dim: #8296a5; --ret-panel-bg: #0f0a2e; --ret-panel-border: rgba(103,126,234,0.15); --ret-stat-bg: rgba(255,255,255,0.04); --ret-streak-bg: rgba(255,255,255,0.03); --ret-streak-dot-bg: rgba(255,255,255,0.04); --ret-reward-bg: rgba(255,255,255,0.03); --ret-reward-border: rgba(16, 185, 129, 0.2); --ret-overlay-bg: rgba(0,0,0,0.5); --ret-rp-bg: rgba(255,255,255,0.04); --ret-rp-item-bg: rgba(255,255,255,0.06); } /* ============================================ RECENTLY PLAYED — Horizontal Scroll Strip ============================================ */ .recently-played-wrapper { display: none; flex-direction: column; background: var(--ret-rp-bg); border: 1px solid var(--ret-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; gap: 6px; } .rp-header { display: flex; align-items: center; } .rp-label { font-size: 11px; font-weight: 700; color: var(--ret-accent); text-transform: uppercase; letter-spacing: 0.5px; } .rp-label .rp-icon { margin-right: 4px; color: #a78bfa; } .rp-scroll { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } /* Hide scrollbar but keep scroll */ .rp-scroll::-webkit-scrollbar { height: 3px; } .rp-scroll::-webkit-scrollbar-track { background: transparent; } .rp-scroll::-webkit-scrollbar-thumb { background: var(--ret-accent); border-radius: 4px; } .rp-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-decoration: none !important; width: 64px; transition: transform 0.2s ease; } .rp-item:hover { transform: translateY(-2px); } .rp-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 2px solid var(--ret-border); background: var(--ret-rp-item-bg); } .rp-name { font-size: 9px; color: var(--ret-text-dim); text-align: center; margin-top: 3px; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } /* ============================================ CONTINUE PLAYING PROMPT ============================================ */ .continue-playing-prompt { background: var(--ret-rp-bg); border: 1px solid var(--ret-border); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; animation: slideDown 0.4s ease-out; } .cp-content { display: flex; align-items: center; gap: 10px; } .cp-thumb img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; } .cp-thumb { flex-shrink: 0; } .cp-text { flex: 1; min-width: 0; } .cp-label { font-size: 10px; color: var(--ret-accent); font-weight: 600; text-transform: uppercase; } .cp-title { font-size: 13px; font-weight: 700; color: var(--ret-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cp-btn-play { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff !important; padding: 5px 14px; border-radius: 20px; font-weight: 700; font-size: 11px; text-decoration: none !important; } .cp-btn-play:hover { transform: scale(1.05); color: #fff !important; } .cp-btn-dismiss { background: transparent; border: 1px solid var(--ret-border); color: var(--ret-text-dim); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ RANDOM GAME BUTTON ============================================ */ .btn-random-game { background: linear-gradient(135deg, #10b981, #059669); color: #fff !important; padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 12px; cursor: pointer; text-decoration: none !important; display: inline-flex; align-items: center; gap: 4px; border: none; box-shadow: 0 2px 8px rgba(16,185,129,0.25); margin-right: 6px; white-space: nowrap; transition: all 0.3s ease; } .btn-random-game:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(16,185,129,0.4); color: #fff !important; } /* ============================================ FLOATING ACTION BUTTON (FAB) ============================================ */ .tng-fab { position: fixed; bottom: 24px; right: 24px; z-index: 9990; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 18px rgba(102,126,234,0.4); transition: all 0.3s ease; } .tng-fab:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(102,126,234,0.6); } .tng-fab-icon { font-size: 22px; } .tng-fab-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; background: #ef4444; border-radius: 50%; border: 2px solid #fff; animation: fabPulse 2s ease infinite; } [data-theme="dark"] .tng-fab-dot { border-color: #0f0a2e; } .tng-fab-streak { position: absolute; bottom: -3px; right: -3px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 8px; } @keyframes fabPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } /* ============================================ SLIDE-OUT PANEL ============================================ */ .tng-panel-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--ret-overlay-bg); z-index: 9991; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .tng-panel-overlay.open { opacity: 1; pointer-events: all; } .tng-panel { position: fixed; top: 0; right: -380px; bottom: 0; width: 340px; max-width: 88vw; z-index: 9992; background: var(--ret-panel-bg); border-left: 1px solid var(--ret-panel-border); box-shadow: -4px 0 25px rgba(0,0,0,0.15); transition: right 0.35s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; } [data-theme="dark"] .tng-panel { box-shadow: -4px 0 30px rgba(0,0,0,0.5); } .tng-panel.open { right: 0; } .tng-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--ret-border); } .tng-panel-header h3 { color: var(--ret-text); font-size: 16px; margin: 0; font-weight: 700; } .tng-panel-close { background: var(--ret-stat-bg); border: none; color: var(--ret-text-dim); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; } .tng-panel-close:hover { color: var(--ret-text); } .tng-panel-body { flex: 1; overflow-y: auto; padding: 14px 18px; } .tng-panel-section { margin-bottom: 16px; } /* Stats Grid */ .stats-panel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 16px; } .stat-box { background: var(--ret-stat-bg); border: 1px solid var(--ret-border); border-radius: 10px; padding: 10px 4px; text-align: center; } .stat-icon { font-size: 18px; margin-bottom: 2px; } .stat-val { font-size: 16px; font-weight: 800; color: var(--ret-text); } .stat-label { font-size: 9px; color: var(--ret-text-dim); text-transform: uppercase; } /* Streak */ .streak-card { background: var(--ret-streak-bg); border: 1px solid rgba(239,68,68,0.15); border-radius: 12px; padding: 14px; text-align: center; } .streak-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; } .streak-fire { font-size: 28px; } .streak-count { font-size: 18px; font-weight: 800; color: var(--ret-text); } .streak-tier { font-size: 10px; color: var(--ret-accent); text-transform: uppercase; } .streak-dots { display: flex; justify-content: center; gap: 5px; } .streak-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ret-text-dim); background: var(--ret-streak-dot-bg); border: 2px solid var(--ret-border); } .streak-dot.active { background: var(--ret-streak-dot-active); color: #fff; border-color: rgba(102,126,234,0.4); } /* Daily Reward */ .reward-card { background: var(--ret-reward-bg); border: 1px solid var(--ret-reward-border); border-radius: 12px; padding: 14px; text-align: center; } .reward-card.claimed { opacity: 0.7; } .reward-icon { font-size: 32px; margin-bottom: 6px; } .reward-icon.pulse { animation: rewardPulse 2s ease-in-out infinite; } .reward-text { font-size: 14px; font-weight: 700; color: var(--ret-text); } .reward-sub { font-size: 11px; color: var(--ret-text-dim); } .reward-claim-btn { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; padding: 8px 20px; border-radius: 20px; font-weight: 700; font-size: 12px; cursor: pointer; margin-top: 8px; } @keyframes rewardPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } } /* Achievements */ .achievements-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; } .achievement-item { background: var(--ret-stat-bg); border: 1px solid var(--ret-border); border-radius: 8px; padding: 10px 6px; text-align: center; } .achievement-item.unlocked { background: rgba(102,126,234,0.08); border-color: rgba(102,126,234,0.25); } .achievement-item.locked { opacity: var(--ret-ach-locked); } .achievement-icon { font-size: 20px; margin-bottom: 3px; } .achievement-name { font-size: 10px; font-weight: 700; color: var(--ret-text); } .achievement-desc { font-size: 8px; color: var(--ret-text-dim); } /* Section Title */ .gamification-title { font-size: 12px; font-weight: 700; color: var(--ret-accent); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--ret-border); } /* Notification */ .tng-notification { position: fixed; top: 16px; right: -400px; z-index: 99999; padding: 10px 18px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff; transition: right 0.5s cubic-bezier(0.68,-0.55,0.265,1.55); box-shadow: 0 4px 20px rgba(0,0,0,0.25); max-width: 300px; } .tng-notification.show { right: 16px; } .tng-notif-success { background: linear-gradient(135deg, #10b981, #059669); } .tng-notif-achievement { background: linear-gradient(135deg, #f59e0b, #d97706); } .tng-notif-info { background: linear-gradient(135deg, #667eea, #764ba2); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .rp-item { width: 56px; } .rp-item img { width: 44px; height: 44px; border-radius: 8px; } .rp-name { font-size: 8px; max-width: 56px; } .recently-played-wrapper { padding: 6px 8px; } .btn-random-game { padding: 4px 10px; font-size: 11px; } .tng-fab { width: 44px; height: 44px; bottom: 16px; right: 16px; } .tng-fab-icon { font-size: 18px; } .stats-panel-grid { grid-template-columns: repeat(2,1fr); } .achievements-grid { grid-template-columns: repeat(2,1fr); } .tng-panel { width: 300px; } } @media (max-width: 480px) { .rp-item { width: 50px; } .rp-item img { width: 38px; height: 38px; } .rp-name { font-size: 7px; max-width: 50px; } .continue-playing-prompt { padding: 6px 10px; } .cp-thumb img { width: 26px; height: 26px; } .cp-btn-play { padding: 4px 10px; font-size: 10px; } }