Hugging Face's logo

Spaces:
DiamondVi
/
deepsite-project-w0e00
Running

App Files Community
deepsite-project-w0e00
File size: 4,810 Bytes
3714240
 
 
 
52f5de5
 
3714240
 
 
 
52f5de5
 
3714240
 
 
52f5de5
 
3714240
 
 
52f5de5
 
3714240
 
 
52f5de5
3714240
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
/* Custom Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-5deg); }
    75% { transform: translateX(5px) rotate(5deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); }
    50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.8), 0 0 60px rgba(251, 191, 36, 0.4); }
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes particle-float {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

@keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

@keyframes orbit {
    0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

/* Skin Styles */
.cookie-skin-default {
    background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #92400e 100%);
}

.cookie-skin-chocolate {
    background: linear-gradient(135deg, #451a03 0%, #78350f 50%, #451a03 100%);
    border-color: #271c19;
}

.cookie-skin-golden {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 50%, #a16207 100%);
    box-shadow: 0 0 30px rgba(234, 179, 8, 0.6);
    animation: pulse-glow 2s infinite;
}

.cookie-skin-galaxy {
    background: linear-gradient(135deg, #9333ea 0%, #c084fc 25%, #818cf8 50%, #c084fc 75%, #9333ea 100%);
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

.cookie-skin-radioactive {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
    animation: pulse 1s infinite;
}

.cookie-skin-cosmic {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #06b6d4, #8b5cf6, #ec4899);
    background-size: 300% 100%;
    animation: rainbow 3s linear infinite;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.8);
}

.cookie-skin-void {
    background: radial-gradient(circle at 30% 30%, #374151 0%, #000000 50%, #000000 100%);
    border-color: #1f2937;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(75, 85, 99, 0.5);
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Utility Classes */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-bounce-in {
    animation: bounce-in 0.6s ease-out;
}

.animate-glitch {
    animation: glitch 0.3s infinite;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float 1s ease-out forwards;
}

.floating-text {
    position: absolute;
    font-weight: 900;
    pointer-events: none;
    animation: float-up 1s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 50;
}

@keyframes float-up {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}

/* Touch optimization */
.touch-manipulation {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Orbit animation for indicator */
.orbit-indicator {
    animation: orbit 2s linear infinite;
}

/* Country leaderboard styles */
.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(0,0,0,0.3);
    border-radius: 0.5rem;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.leaderboard-item.current-player {
    border-color: rgba(251, 191, 36, 0.8);
    background: rgba(251, 191, 36, 0.1);
}

/* Custom scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.5);
    border-radius: 2px;
}

/* Timing glow effects */
.timing-perfect {
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.8) !important;
}

.timing-great {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.6) !important;
}

.timing-good {
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5) !important;
}