.grid-cell { transition: all 0.2s ease-in-out; }
.football-active, .diy-active { box-shadow: 0 0 15px 4px rgba(168, 85, 247, 0.7), inset 0 0 0 3px #a855f7 !important; background-color: #3b0764 !important; color: #f3e8ff !important; transform: scale(1.05); z-index: 10; position: relative; border-color: #d8b4fe !important; }
.football-solved, .diy-solved { background-color: #16a34a !important; color: white !important; font-weight: 900 !important; cursor: default; box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.5) !important; border-color: #22c55e !important; }
.f1-active { box-shadow: 0 0 15px 4px rgba(147, 51, 234, 0.7), inset 0 0 0 3px #9333ea !important; background-color: #3b0764 !important; color: #f3e8ff !important; transform: scale(1.05); z-index: 10; position: relative; border-color: #d8b4fe !important; }
.f1-solved { background-color: #9333ea !important; color: white !important; font-weight: 900 !important; cursor: default; box-shadow: 0 0 10px 2px rgba(147, 51, 234, 0.5) !important; border-color: #d8b4fe !important; }
.premium-bg { background: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 100%); }
.scrolling-wrapper::-webkit-scrollbar { height: 6px; } .scrolling-wrapper::-webkit-scrollbar-track { background: #1e293b; border-radius: 4px; } .scrolling-wrapper::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar { height: 12px; } .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.spinner { border: 4px solid rgba(255,255,255,0.1); border-left-color: #a855f7; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; transition: border-color 0.3s; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.tab-btn { transition: all 0.2s; border-bottom: 2px solid transparent; } .tab-btn.active-tab { border-bottom-color: #eab308; color: #fde047; font-weight: 900; }
.race-pulse { animation: racePulse 1s infinite; }
@keyframes racePulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }
.glow-inbox { animation: inboxGlow 1.5s infinite alternate; border-color: #3b82f6 !important; }
@keyframes inboxGlow { 0% { box-shadow: 0 0 10px #22c55e, inset 0 0 10px #3b82f6; } 100% { box-shadow: 0 0 25px #3b82f6, inset 0 0 15px #22c55e; } }
.user-pfp { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; border: 2px solid rgba(255,255,255,0.2); box-shadow: inset 0 0 10px rgba(0,0,0,0.3); transition: all 0.3s; background-size: cover; background-position: center; overflow: hidden; }
.pfp-sm { width: 36px; height: 36px; font-size: 1rem; } .pfp-md { width: 48px; height: 48px; font-size: 1.5rem; } .pfp-lg { width: 80px; height: 80px; font-size: 2.5rem; }
input[type="color"] { -webkit-appearance: none; border: none; width: 100%; height: 40px; border-radius: 8px; cursor: pointer; padding: 0; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.emoji-btn { transition: transform 0.1s; } .emoji-btn:hover { transform: scale(1.2); } .emoji-btn.selected { background-color: rgba(168, 85, 247, 0.3); border-color: #a855f7; transform: scale(1.1); }
.gradient-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .gradient-btn.selected { border-color: white; box-shadow: 0 0 10px rgba(255,255,255,0.5); }

.trophy-track-container { position: relative; display: flex; align-items: center; padding-left: 50vw; padding-right: 50vw; height: 350px; width: max-content; min-width: 100%; }
.trophy-bg-line { position: absolute; left: 0; width: 100%; height: 16px; background: #334155; top: 50%; transform: translateY(-50%); z-index: 1; border-radius: 8px; }
.trophy-fill-line { position: absolute; left: 0; height: 16px; background: #eab308; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: 0 0 15px rgba(234, 179, 8, 0.8); transition: width 1s ease-in-out; border-radius: 8px 0 0 8px; }
.trophy-node { position: relative; width: 180px; height: 100%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; z-index: 10; }
.milestone-circle { width: 70px; height: 70px; border-radius: 50%; background: #1e293b; border: 5px solid #475569; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 900; color: #94a3b8; z-index: 20; box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: all 0.3s; }
.milestone-circle.unlocked { border-color: #eab308; background: #a16207; color: #fde047; box-shadow: 0 0 20px rgba(234, 179, 8, 0.6); transform: scale(1.1); }
.reward-card { position: absolute; width: 130px; background: #1e293b; border: 2px solid #475569; border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 10px 20px rgba(0,0,0,0.4); z-index: 15; transition: transform 0.2s; }
.reward-card:hover { transform: scale(1.05); }
.reward-card.unlocked { border-color: #eab308; background: linear-gradient(to bottom, #1e293b, #422006); }
.reward-card.top { top: 20px; }
.reward-card.bottom { bottom: 20px; }

.grab-cursor { cursor: grab; }
.grabbing-cursor { cursor: grabbing !important; }

@keyframes borderPulseGold { 0% { box-shadow: 0 0 10px #facc15; border-color: #ca8a04; } 50% { box-shadow: 0 0 25px #facc15; border-color: #fef08a; } 100% { box-shadow: 0 0 10px #facc15; border-color: #ca8a04; } }
@keyframes borderShiftNeon { 0% { box-shadow: 0 0 15px #ec4899; border-color: #d946ef; } 50% { box-shadow: 0 0 25px #a855f7; border-color: #c084fc; } 100% { box-shadow: 0 0 15px #ec4899; border-color: #d946ef; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }