reaper-arcade-hub 2.7.0 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/styles.css +305 -158
- package/index.html +36 -21
- package/js/app.js +4 -4
- package/js/security-shield.js +35 -2
- package/main/css/styles.css +305 -158
- package/main/index.html +36 -21
- package/main/js/app.js +4 -4
- package/main/js/security-shield.js +35 -2
- package/package.json +1 -1
- package/verify/css/styles.css +305 -158
- package/verify/js/security-shield.js +35 -2
package/css/styles.css
CHANGED
|
@@ -47,123 +47,232 @@ body {
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
/* 10-Second Splash Loader with Dynamic Space Background */
|
|
50
|
-
|
|
50
|
+
/* ==========================================
|
|
51
|
+
ULTRA-MODERN CYBER REACTOR LOADER
|
|
52
|
+
========================================== */
|
|
53
|
+
.cyber-splash-screen {
|
|
51
54
|
position: fixed;
|
|
52
|
-
|
|
53
|
-
left: 0;
|
|
55
|
+
inset: 0;
|
|
54
56
|
width: 100vw;
|
|
55
57
|
height: 100vh;
|
|
56
|
-
background: radial-gradient(circle at 50%
|
|
57
|
-
z-index:
|
|
58
|
+
background: radial-gradient(circle at 50% 45%, #05142f 0%, #020713 55%, #000206 100%);
|
|
59
|
+
z-index: 999999;
|
|
58
60
|
display: flex;
|
|
59
61
|
align-items: center;
|
|
60
62
|
justify-content: center;
|
|
61
|
-
|
|
63
|
+
padding: 1.5rem;
|
|
62
64
|
overflow: hidden;
|
|
63
65
|
}
|
|
64
66
|
|
|
65
|
-
|
|
67
|
+
.cyber-splash-screen::before {
|
|
66
68
|
content: '';
|
|
67
69
|
position: absolute;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
radial-gradient(circle at 50% 80%, rgba(80, 0, 255, 0.12) 0%, transparent 50%);
|
|
75
|
-
animation: splashAuraShift 12s ease-in-out infinite alternate;
|
|
70
|
+
width: 140vw;
|
|
71
|
+
height: 140vh;
|
|
72
|
+
background: radial-gradient(circle at 30% 30%, rgba(0, 240, 255, 0.12) 0%, transparent 45%),
|
|
73
|
+
radial-gradient(circle at 70% 70%, rgba(138, 43, 226, 0.14) 0%, transparent 50%),
|
|
74
|
+
radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.08) 0%, transparent 60%);
|
|
75
|
+
animation: cyberAuraPulse 8s ease-in-out infinite alternate;
|
|
76
76
|
pointer-events: none;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
@keyframes
|
|
80
|
-
0% { transform:
|
|
81
|
-
|
|
82
|
-
100% { transform: rotate(-8deg) scale(1.02); }
|
|
79
|
+
@keyframes cyberAuraPulse {
|
|
80
|
+
0% { transform: scale(1) rotate(0deg); opacity: 0.7; }
|
|
81
|
+
100% { transform: scale(1.12) rotate(10deg); opacity: 1; }
|
|
83
82
|
}
|
|
84
83
|
|
|
85
|
-
.
|
|
84
|
+
.cyber-reactor-card {
|
|
86
85
|
position: relative;
|
|
87
86
|
z-index: 10;
|
|
88
87
|
text-align: center;
|
|
89
|
-
max-width:
|
|
90
|
-
width:
|
|
91
|
-
padding: 2.
|
|
92
|
-
background: rgba(4,
|
|
93
|
-
border: 1.5px solid rgba(0,
|
|
94
|
-
border-radius:
|
|
95
|
-
box-shadow: 0
|
|
96
|
-
backdrop-filter: blur(
|
|
97
|
-
-webkit-backdrop-filter: blur(
|
|
88
|
+
max-width: 480px;
|
|
89
|
+
width: 92%;
|
|
90
|
+
padding: 2.6rem 2.2rem;
|
|
91
|
+
background: rgba(4, 10, 24, 0.85);
|
|
92
|
+
border: 1.5px solid rgba(0, 240, 255, 0.35);
|
|
93
|
+
border-radius: 20px;
|
|
94
|
+
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 45px rgba(0, 240, 255, 0.25), inset 0 0 25px rgba(0, 240, 255, 0.05);
|
|
95
|
+
backdrop-filter: blur(24px);
|
|
96
|
+
-webkit-backdrop-filter: blur(24px);
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
align-items: center;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.reactor-core-box {
|
|
103
|
+
position: relative;
|
|
104
|
+
width: 90px;
|
|
105
|
+
height: 90px;
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
justify-content: center;
|
|
109
|
+
margin-bottom: 1.25rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.reactor-ring-outer {
|
|
113
|
+
position: absolute;
|
|
114
|
+
inset: 0;
|
|
115
|
+
border-radius: 50%;
|
|
116
|
+
border: 2px dashed rgba(0, 240, 255, 0.6);
|
|
117
|
+
box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
|
|
118
|
+
animation: spinOuter 6s linear infinite;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.reactor-ring-inner {
|
|
122
|
+
position: absolute;
|
|
123
|
+
inset: 10px;
|
|
124
|
+
border-radius: 50%;
|
|
125
|
+
border: 2px solid transparent;
|
|
126
|
+
border-top-color: #ff007f;
|
|
127
|
+
border-bottom-color: #8a2be2;
|
|
128
|
+
box-shadow: 0 0 15px rgba(255, 0, 127, 0.5);
|
|
129
|
+
animation: spinInner 3.5s linear infinite reverse;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.reactor-pulse-orb {
|
|
133
|
+
width: 48px;
|
|
134
|
+
height: 48px;
|
|
135
|
+
border-radius: 50%;
|
|
136
|
+
background: linear-gradient(135deg, #00f0ff, #8a2be2);
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
box-shadow: 0 0 25px rgba(0, 240, 255, 0.8);
|
|
141
|
+
animation: pulseCoreOrb 2s ease-in-out infinite alternate;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.reactor-symbol {
|
|
145
|
+
font-size: 1.5rem;
|
|
146
|
+
color: #fff;
|
|
147
|
+
filter: drop-shadow(0 0 6px #fff);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@keyframes spinOuter {
|
|
151
|
+
from { transform: rotate(0deg); }
|
|
152
|
+
to { transform: rotate(360deg); }
|
|
98
153
|
}
|
|
99
154
|
|
|
100
|
-
|
|
155
|
+
@keyframes spinInner {
|
|
156
|
+
from { transform: rotate(0deg); }
|
|
157
|
+
to { transform: rotate(360deg); }
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@keyframes pulseCoreOrb {
|
|
161
|
+
from { transform: scale(0.92); box-shadow: 0 0 15px rgba(0, 240, 255, 0.6); }
|
|
162
|
+
to { transform: scale(1.08); box-shadow: 0 0 35px rgba(0, 255, 136, 0.9); }
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.loader-brand-title {
|
|
101
166
|
font-family: var(--font-logo);
|
|
102
|
-
font-size: 3.
|
|
167
|
+
font-size: 3.4rem;
|
|
103
168
|
font-weight: 900;
|
|
104
|
-
color: #
|
|
105
|
-
text-shadow: 0 0 30px var(--blue-glow);
|
|
169
|
+
color: #ffffff;
|
|
106
170
|
letter-spacing: 0.15em;
|
|
107
171
|
margin-bottom: 0.2rem;
|
|
108
172
|
line-height: 1;
|
|
173
|
+
text-shadow: 0 0 30px rgba(0, 240, 255, 0.8);
|
|
109
174
|
}
|
|
110
175
|
|
|
111
|
-
.
|
|
176
|
+
.loader-badge-tag {
|
|
177
|
+
display: inline-flex;
|
|
178
|
+
align-items: center;
|
|
179
|
+
gap: 0.45rem;
|
|
112
180
|
font-family: var(--font-heading);
|
|
113
|
-
|
|
114
|
-
font-size: 0.76rem;
|
|
181
|
+
font-size: 0.72rem;
|
|
115
182
|
font-weight: 800;
|
|
116
|
-
|
|
183
|
+
color: #00f0ff;
|
|
184
|
+
letter-spacing: 0.14em;
|
|
117
185
|
text-transform: uppercase;
|
|
118
|
-
|
|
186
|
+
background: rgba(0, 240, 255, 0.08);
|
|
187
|
+
border: 1px solid rgba(0, 240, 255, 0.25);
|
|
188
|
+
padding: 0.25rem 0.85rem;
|
|
189
|
+
border-radius: 20px;
|
|
190
|
+
margin-bottom: 1.15rem;
|
|
119
191
|
}
|
|
120
192
|
|
|
121
|
-
.
|
|
122
|
-
|
|
193
|
+
.badge-dot-live {
|
|
194
|
+
width: 6px;
|
|
195
|
+
height: 6px;
|
|
196
|
+
border-radius: 50%;
|
|
197
|
+
background: #00ff88;
|
|
198
|
+
box-shadow: 0 0 8px #00ff88;
|
|
199
|
+
animation: pulseDot 1s infinite alternate;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.loader-terminal-strip {
|
|
203
|
+
width: 100%;
|
|
204
|
+
background: rgba(2, 6, 16, 0.92);
|
|
205
|
+
border: 1px solid rgba(0, 136, 255, 0.25);
|
|
206
|
+
border-radius: 8px;
|
|
207
|
+
padding: 0.45rem 0.85rem;
|
|
208
|
+
font-family: var(--font-mono);
|
|
209
|
+
font-size: 0.75rem;
|
|
210
|
+
color: #79a6d2;
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: center;
|
|
213
|
+
gap: 0.45rem;
|
|
214
|
+
margin-bottom: 0.75rem;
|
|
215
|
+
white-space: nowrap;
|
|
216
|
+
overflow: hidden;
|
|
217
|
+
text-overflow: ellipsis;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.terminal-arrow {
|
|
221
|
+
color: #00ff88;
|
|
222
|
+
font-weight: 900;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.loader-quote-box {
|
|
226
|
+
min-height: 40px;
|
|
123
227
|
display: flex;
|
|
124
228
|
align-items: center;
|
|
125
229
|
justify-content: center;
|
|
126
|
-
margin-bottom:
|
|
127
|
-
|
|
128
|
-
background: rgba(2, 6, 15, 0.6);
|
|
129
|
-
border: 1px solid rgba(0, 136, 255, 0.25);
|
|
130
|
-
border-radius: 8px;
|
|
230
|
+
margin-bottom: 1rem;
|
|
231
|
+
width: 100%;
|
|
131
232
|
}
|
|
132
233
|
|
|
133
|
-
.
|
|
134
|
-
font-
|
|
135
|
-
|
|
234
|
+
.loader-quote-text {
|
|
235
|
+
font-size: 0.8rem;
|
|
236
|
+
color: #c5dcf7;
|
|
136
237
|
font-style: italic;
|
|
137
|
-
font-weight:
|
|
138
|
-
color: #c5e3ff;
|
|
139
|
-
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
238
|
+
font-weight: 500;
|
|
140
239
|
line-height: 1.4;
|
|
240
|
+
transition: opacity 0.25s ease, transform 0.25s ease;
|
|
141
241
|
}
|
|
142
242
|
|
|
143
|
-
.
|
|
243
|
+
.loader-progress-track {
|
|
144
244
|
width: 100%;
|
|
145
|
-
height:
|
|
146
|
-
background: #
|
|
245
|
+
height: 8px;
|
|
246
|
+
background: #020712;
|
|
247
|
+
border: 1px solid rgba(0, 240, 255, 0.35);
|
|
147
248
|
border-radius: 6px;
|
|
148
249
|
overflow: hidden;
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
|
|
250
|
+
margin-bottom: 0.75rem;
|
|
251
|
+
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9);
|
|
152
252
|
}
|
|
153
253
|
|
|
154
|
-
.
|
|
254
|
+
.loader-progress-fill {
|
|
155
255
|
width: 0%;
|
|
156
256
|
height: 100%;
|
|
157
|
-
background: linear-gradient(90deg, #
|
|
158
|
-
|
|
159
|
-
|
|
257
|
+
background: linear-gradient(90deg, #0088ff, #00f0ff, #00ff88);
|
|
258
|
+
border-radius: 6px;
|
|
259
|
+
box-shadow: 0 0 16px #00f0ff;
|
|
260
|
+
transition: width 0.08s linear;
|
|
160
261
|
}
|
|
161
262
|
|
|
162
|
-
.
|
|
263
|
+
.loader-bottom-meta {
|
|
264
|
+
width: 100%;
|
|
265
|
+
display: flex;
|
|
266
|
+
justify-content: space-between;
|
|
267
|
+
align-items: center;
|
|
163
268
|
font-family: var(--font-mono);
|
|
164
|
-
font-size: 0.
|
|
165
|
-
color:
|
|
166
|
-
|
|
269
|
+
font-size: 0.72rem;
|
|
270
|
+
color: #789bbd;
|
|
271
|
+
font-weight: 700;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.loader-latency-tag {
|
|
275
|
+
color: #00ff88;
|
|
167
276
|
}
|
|
168
277
|
|
|
169
278
|
/* App Header */
|
|
@@ -171,19 +280,21 @@ body {
|
|
|
171
280
|
position: sticky;
|
|
172
281
|
top: 0;
|
|
173
282
|
z-index: 100;
|
|
174
|
-
background: rgba(
|
|
175
|
-
border-bottom:
|
|
176
|
-
backdrop-filter: blur(
|
|
177
|
-
-webkit-backdrop-filter: blur(
|
|
283
|
+
background: rgba(3, 8, 20, 0.85);
|
|
284
|
+
border-bottom: 1.5px solid rgba(0, 210, 255, 0.18);
|
|
285
|
+
backdrop-filter: blur(24px);
|
|
286
|
+
-webkit-backdrop-filter: blur(24px);
|
|
287
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
|
178
288
|
}
|
|
179
289
|
|
|
180
290
|
.nav-container {
|
|
181
291
|
max-width: 1700px;
|
|
182
292
|
margin: 0 auto;
|
|
183
|
-
padding: 0.
|
|
293
|
+
padding: 0.7rem 1.5rem;
|
|
184
294
|
display: flex;
|
|
185
295
|
align-items: center;
|
|
186
296
|
justify-content: space-between;
|
|
297
|
+
gap: 1rem;
|
|
187
298
|
}
|
|
188
299
|
|
|
189
300
|
.brand-logo {
|
|
@@ -192,49 +303,62 @@ body {
|
|
|
192
303
|
gap: 0.5rem;
|
|
193
304
|
cursor: pointer;
|
|
194
305
|
user-select: none;
|
|
306
|
+
transition: transform 0.2s ease;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.brand-logo:hover {
|
|
310
|
+
transform: scale(1.03);
|
|
195
311
|
}
|
|
196
312
|
|
|
197
313
|
.brand-logo span {
|
|
198
314
|
font-family: var(--font-logo);
|
|
199
|
-
font-size:
|
|
315
|
+
font-size: 2rem;
|
|
200
316
|
font-weight: 900;
|
|
201
317
|
color: #fff;
|
|
202
|
-
letter-spacing: 0.
|
|
203
|
-
text-shadow: 0 0
|
|
318
|
+
letter-spacing: 0.12em;
|
|
319
|
+
text-shadow: 0 0 25px rgba(0, 210, 255, 0.8), 0 0 50px rgba(0, 136, 255, 0.4);
|
|
204
320
|
}
|
|
205
321
|
|
|
206
|
-
/* Nav Tabs Pill */
|
|
322
|
+
/* Nav Tabs Pill - Futuristic Glass Dock */
|
|
207
323
|
.nav-tabs-pill {
|
|
208
324
|
display: flex;
|
|
209
|
-
background:
|
|
210
|
-
border:
|
|
325
|
+
background: rgba(5, 12, 28, 0.75);
|
|
326
|
+
border: 1.5px solid rgba(0, 210, 255, 0.25);
|
|
211
327
|
border-radius: 30px;
|
|
212
|
-
padding: 0.
|
|
213
|
-
gap: 0.
|
|
328
|
+
padding: 0.28rem 0.35rem;
|
|
329
|
+
gap: 0.25rem;
|
|
330
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 210, 255, 0.05);
|
|
331
|
+
backdrop-filter: blur(16px);
|
|
214
332
|
}
|
|
215
333
|
|
|
216
334
|
.nav-tab-btn {
|
|
217
335
|
background: transparent;
|
|
218
336
|
border: none;
|
|
219
|
-
color: #
|
|
220
|
-
padding: 0.45rem 1.
|
|
337
|
+
color: #a4c4e8;
|
|
338
|
+
padding: 0.45rem 1.2rem;
|
|
221
339
|
font-size: 0.84rem;
|
|
222
|
-
font-weight:
|
|
340
|
+
font-weight: 700;
|
|
223
341
|
font-family: var(--font-heading);
|
|
224
342
|
border-radius: 20px;
|
|
225
343
|
cursor: pointer;
|
|
226
|
-
transition: all 0.
|
|
344
|
+
transition: all 0.22s cubic-bezier(0.2, 0, 0.2, 1);
|
|
345
|
+
display: inline-flex;
|
|
346
|
+
align-items: center;
|
|
347
|
+
gap: 0.35rem;
|
|
227
348
|
}
|
|
228
349
|
|
|
229
350
|
.nav-tab-btn:hover {
|
|
230
|
-
color: #
|
|
231
|
-
background: rgba(0,
|
|
351
|
+
color: #ffffff;
|
|
352
|
+
background: rgba(0, 210, 255, 0.12);
|
|
353
|
+
transform: translateY(-1px);
|
|
232
354
|
}
|
|
233
355
|
|
|
234
356
|
.nav-tab-btn.active {
|
|
235
|
-
background: linear-gradient(135deg, #
|
|
236
|
-
color: #
|
|
237
|
-
box-shadow: 0 0
|
|
357
|
+
background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
|
|
358
|
+
color: #ffffff;
|
|
359
|
+
box-shadow: 0 0 20px rgba(0, 210, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
360
|
+
font-weight: 800;
|
|
361
|
+
transform: translateY(-1px);
|
|
238
362
|
}
|
|
239
363
|
|
|
240
364
|
.header-right {
|
|
@@ -444,45 +568,31 @@ body {
|
|
|
444
568
|
box-shadow: 0 0 12px rgba(0, 136, 255, 0.45);
|
|
445
569
|
}
|
|
446
570
|
|
|
447
|
-
/* Games Grid */
|
|
571
|
+
/* Games Grid - Modern Responsive Layout */
|
|
448
572
|
.games-grid {
|
|
449
573
|
display: grid;
|
|
450
|
-
grid-template-columns: repeat(auto-fill, minmax(
|
|
451
|
-
gap: 1.
|
|
574
|
+
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
|
575
|
+
gap: 1.25rem;
|
|
452
576
|
}
|
|
453
577
|
|
|
454
578
|
.game-card {
|
|
455
|
-
background: linear-gradient(
|
|
456
|
-
border: 1.5px solid
|
|
457
|
-
border-radius:
|
|
579
|
+
background: linear-gradient(150deg, rgba(8, 18, 38, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
|
|
580
|
+
border: 1.5px solid rgba(0, 210, 255, 0.18);
|
|
581
|
+
border-radius: 14px;
|
|
458
582
|
overflow: hidden;
|
|
459
583
|
cursor: pointer;
|
|
460
|
-
transition: transform 0.
|
|
584
|
+
transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
|
|
461
585
|
display: flex;
|
|
462
586
|
flex-direction: column;
|
|
463
587
|
position: relative;
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
}
|
|
467
|
-
|
|
468
|
-
.game-card::after {
|
|
469
|
-
content: '';
|
|
470
|
-
position: absolute;
|
|
471
|
-
inset: 0;
|
|
472
|
-
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 210, 255, 0.25) 0%, transparent 65%);
|
|
473
|
-
opacity: 0;
|
|
474
|
-
transition: opacity 0.3s ease;
|
|
475
|
-
pointer-events: none;
|
|
476
|
-
mix-blend-mode: screen;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
.game-card:hover::after {
|
|
480
|
-
opacity: 1;
|
|
588
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
|
|
589
|
+
backdrop-filter: blur(12px);
|
|
481
590
|
}
|
|
482
591
|
|
|
483
592
|
.game-card:hover {
|
|
484
|
-
border-color:
|
|
485
|
-
box-shadow: 0
|
|
593
|
+
border-color: rgba(0, 240, 255, 0.75);
|
|
594
|
+
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 210, 255, 0.45);
|
|
595
|
+
transform: translateY(-6px);
|
|
486
596
|
}
|
|
487
597
|
|
|
488
598
|
.game-thumb-container {
|
|
@@ -497,42 +607,67 @@ body {
|
|
|
497
607
|
width: 100%;
|
|
498
608
|
height: 100%;
|
|
499
609
|
object-fit: cover;
|
|
500
|
-
transition: transform 0.
|
|
610
|
+
transition: transform 0.35s cubic-bezier(0.2, 0, 0.2, 1);
|
|
501
611
|
}
|
|
502
612
|
|
|
503
613
|
.game-card:hover .game-thumb {
|
|
504
|
-
transform: scale(1.
|
|
614
|
+
transform: scale(1.08);
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.game-thumb-container::after {
|
|
618
|
+
content: '▶ PLAY';
|
|
619
|
+
position: absolute;
|
|
620
|
+
inset: 0;
|
|
621
|
+
background: rgba(0, 10, 24, 0.65);
|
|
622
|
+
display: flex;
|
|
623
|
+
align-items: center;
|
|
624
|
+
justify-content: center;
|
|
625
|
+
color: #00ffaa;
|
|
626
|
+
font-family: var(--font-heading);
|
|
627
|
+
font-weight: 900;
|
|
628
|
+
font-size: 0.88rem;
|
|
629
|
+
letter-spacing: 0.15em;
|
|
630
|
+
opacity: 0;
|
|
631
|
+
transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
|
|
632
|
+
backdrop-filter: blur(2px);
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.game-card:hover .game-thumb-container::after {
|
|
636
|
+
opacity: 1;
|
|
505
637
|
}
|
|
506
638
|
|
|
507
639
|
.game-badge-featured {
|
|
508
640
|
position: absolute;
|
|
509
641
|
top: 8px;
|
|
510
642
|
left: 8px;
|
|
511
|
-
|
|
643
|
+
z-index: 2;
|
|
644
|
+
background: linear-gradient(135deg, #00d2ff, #0055ff);
|
|
512
645
|
color: #fff;
|
|
513
646
|
font-size: 0.62rem;
|
|
514
647
|
font-weight: 800;
|
|
515
648
|
font-family: var(--font-heading);
|
|
516
|
-
padding: 0.2rem 0.
|
|
517
|
-
border-radius:
|
|
518
|
-
box-shadow: 0 0
|
|
649
|
+
padding: 0.2rem 0.55rem;
|
|
650
|
+
border-radius: 6px;
|
|
651
|
+
box-shadow: 0 0 12px rgba(0, 210, 255, 0.7);
|
|
652
|
+
letter-spacing: 0.05em;
|
|
519
653
|
}
|
|
520
654
|
|
|
521
655
|
.game-info {
|
|
522
|
-
padding: 0.
|
|
656
|
+
padding: 0.85rem;
|
|
523
657
|
display: flex;
|
|
524
658
|
flex-direction: column;
|
|
525
659
|
flex: 1;
|
|
526
660
|
}
|
|
527
661
|
|
|
528
662
|
.game-title {
|
|
529
|
-
font-size: 0.
|
|
663
|
+
font-size: 0.92rem;
|
|
530
664
|
font-weight: 700;
|
|
531
|
-
color: #
|
|
665
|
+
color: #ffffff;
|
|
532
666
|
white-space: nowrap;
|
|
533
667
|
overflow: hidden;
|
|
534
668
|
text-overflow: ellipsis;
|
|
535
|
-
margin-bottom: 0.
|
|
669
|
+
margin-bottom: 0.4rem;
|
|
670
|
+
letter-spacing: 0.01em;
|
|
536
671
|
}
|
|
537
672
|
|
|
538
673
|
.game-meta {
|
|
@@ -540,8 +675,8 @@ body {
|
|
|
540
675
|
justify-content: space-between;
|
|
541
676
|
align-items: center;
|
|
542
677
|
font-size: 0.72rem;
|
|
543
|
-
color:
|
|
544
|
-
margin-bottom: 0.
|
|
678
|
+
color: #8bb1d9;
|
|
679
|
+
margin-bottom: 0.75rem;
|
|
545
680
|
}
|
|
546
681
|
|
|
547
682
|
.btn-fav {
|
|
@@ -583,44 +718,49 @@ body {
|
|
|
583
718
|
|
|
584
719
|
.btn-card-play {
|
|
585
720
|
width: 100%;
|
|
586
|
-
background:
|
|
587
|
-
border: 1px solid
|
|
588
|
-
color:
|
|
589
|
-
padding: 0.
|
|
590
|
-
font-size: 0.
|
|
721
|
+
background: rgba(0, 136, 255, 0.12);
|
|
722
|
+
border: 1px solid rgba(0, 210, 255, 0.35);
|
|
723
|
+
color: #00d2ff;
|
|
724
|
+
padding: 0.5rem;
|
|
725
|
+
font-size: 0.78rem;
|
|
591
726
|
font-weight: 800;
|
|
592
727
|
font-family: var(--font-heading);
|
|
593
|
-
border-radius:
|
|
728
|
+
border-radius: 8px;
|
|
594
729
|
cursor: pointer;
|
|
595
730
|
transition: all 0.2s ease;
|
|
596
731
|
margin-top: auto;
|
|
732
|
+
letter-spacing: 0.06em;
|
|
597
733
|
}
|
|
598
734
|
|
|
599
735
|
.game-card:hover .btn-card-play {
|
|
600
|
-
background:
|
|
736
|
+
background: linear-gradient(135deg, #00d2ff, #0066ff);
|
|
737
|
+
border-color: #00d2ff;
|
|
601
738
|
color: #fff;
|
|
602
|
-
box-shadow: 0 0
|
|
739
|
+
box-shadow: 0 0 18px rgba(0, 210, 255, 0.6);
|
|
603
740
|
}
|
|
604
741
|
|
|
605
|
-
/* Side Chat Panel */
|
|
742
|
+
/* Side Chat Panel - Sleek Cyber Glass */
|
|
606
743
|
.side-chat-panel {
|
|
607
744
|
width: 370px;
|
|
608
|
-
background: rgba(4, 10,
|
|
609
|
-
border-left:
|
|
745
|
+
background: rgba(4, 10, 22, 0.92);
|
|
746
|
+
border-left: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
610
747
|
display: flex;
|
|
611
748
|
flex-direction: column;
|
|
612
749
|
height: calc(100vh - 65px);
|
|
613
750
|
position: sticky;
|
|
614
751
|
top: 65px;
|
|
752
|
+
backdrop-filter: blur(20px);
|
|
753
|
+
-webkit-backdrop-filter: blur(20px);
|
|
754
|
+
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
|
|
615
755
|
}
|
|
616
756
|
|
|
617
757
|
.red-chat-header {
|
|
618
758
|
padding: 0.85rem 1.15rem;
|
|
619
|
-
border-bottom:
|
|
759
|
+
border-bottom: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
620
760
|
display: flex;
|
|
621
761
|
justify-content: space-between;
|
|
622
762
|
align-items: center;
|
|
623
|
-
background:
|
|
763
|
+
background: rgba(2, 6, 16, 0.95);
|
|
624
764
|
}
|
|
625
765
|
|
|
626
766
|
.red-chat-title {
|
|
@@ -648,7 +788,7 @@ body {
|
|
|
648
788
|
overflow-y: auto;
|
|
649
789
|
display: flex;
|
|
650
790
|
flex-direction: column;
|
|
651
|
-
gap: 0.
|
|
791
|
+
gap: 0.85rem;
|
|
652
792
|
}
|
|
653
793
|
|
|
654
794
|
/* Left / Right Chat Message Rows */
|
|
@@ -670,11 +810,11 @@ body {
|
|
|
670
810
|
}
|
|
671
811
|
|
|
672
812
|
.msg-self .red-msg-bubble {
|
|
673
|
-
background: linear-gradient(135deg,
|
|
813
|
+
background: linear-gradient(135deg, rgba(0, 100, 230, 0.9), rgba(0, 160, 255, 0.9));
|
|
674
814
|
color: #fff;
|
|
675
|
-
border: 1px solid rgba(0, 210, 255, 0.
|
|
676
|
-
border-radius:
|
|
677
|
-
box-shadow: 0
|
|
815
|
+
border: 1px solid rgba(0, 210, 255, 0.45);
|
|
816
|
+
border-radius: 14px 14px 2px 14px;
|
|
817
|
+
box-shadow: 0 4px 15px rgba(0, 136, 255, 0.3);
|
|
678
818
|
}
|
|
679
819
|
|
|
680
820
|
.msg-self .red-msg-meta {
|
|
@@ -686,17 +826,18 @@ body {
|
|
|
686
826
|
}
|
|
687
827
|
|
|
688
828
|
.msg-other .red-msg-bubble {
|
|
689
|
-
background:
|
|
829
|
+
background: rgba(8, 18, 36, 0.85);
|
|
690
830
|
color: #e0eeff;
|
|
691
|
-
border: 1px solid rgba(0,
|
|
692
|
-
border-radius:
|
|
831
|
+
border: 1px solid rgba(0, 210, 255, 0.2);
|
|
832
|
+
border-radius: 14px 14px 14px 2px;
|
|
833
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
693
834
|
}
|
|
694
835
|
|
|
695
836
|
.red-msg-avatar {
|
|
696
837
|
width: 28px;
|
|
697
838
|
height: 28px;
|
|
698
839
|
border-radius: 50%;
|
|
699
|
-
background: #
|
|
840
|
+
background: linear-gradient(135deg, #00d2ff, #0055ff);
|
|
700
841
|
color: #fff;
|
|
701
842
|
display: flex;
|
|
702
843
|
align-items: center;
|
|
@@ -704,6 +845,7 @@ body {
|
|
|
704
845
|
font-weight: 800;
|
|
705
846
|
font-size: 0.72rem;
|
|
706
847
|
flex-shrink: 0;
|
|
848
|
+
box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
|
|
707
849
|
}
|
|
708
850
|
|
|
709
851
|
.red-msg-body {
|
|
@@ -731,8 +873,8 @@ body {
|
|
|
731
873
|
}
|
|
732
874
|
|
|
733
875
|
.red-msg-bubble {
|
|
734
|
-
padding: 0.
|
|
735
|
-
font-size: 0.
|
|
876
|
+
padding: 0.6rem 0.95rem;
|
|
877
|
+
font-size: 0.84rem;
|
|
736
878
|
line-height: 1.45;
|
|
737
879
|
word-break: break-word;
|
|
738
880
|
}
|
|
@@ -748,9 +890,9 @@ body {
|
|
|
748
890
|
.red-btn-del:hover { opacity: 1; }
|
|
749
891
|
|
|
750
892
|
.red-chat-input-bar {
|
|
751
|
-
padding: 0.
|
|
752
|
-
border-top:
|
|
753
|
-
background:
|
|
893
|
+
padding: 0.85rem;
|
|
894
|
+
border-top: 1.5px solid rgba(0, 210, 255, 0.2);
|
|
895
|
+
background: rgba(2, 6, 16, 0.98);
|
|
754
896
|
}
|
|
755
897
|
|
|
756
898
|
.timeout-warning-bar {
|
|
@@ -773,15 +915,20 @@ body {
|
|
|
773
915
|
|
|
774
916
|
.red-chat-input {
|
|
775
917
|
flex: 1;
|
|
776
|
-
background:
|
|
777
|
-
border:
|
|
778
|
-
border-radius:
|
|
779
|
-
padding: 0.
|
|
918
|
+
background: rgba(4, 12, 28, 0.9);
|
|
919
|
+
border: 1.5px solid rgba(0, 210, 255, 0.3);
|
|
920
|
+
border-radius: 10px;
|
|
921
|
+
padding: 0.65rem 0.9rem;
|
|
780
922
|
color: #fff;
|
|
781
|
-
font-size: 0.
|
|
923
|
+
font-size: 0.84rem;
|
|
782
924
|
outline: none;
|
|
925
|
+
transition: all 0.2s ease;
|
|
926
|
+
}
|
|
927
|
+
.red-chat-input:focus {
|
|
928
|
+
border-color: #00d2ff;
|
|
929
|
+
box-shadow: 0 0 14px rgba(0, 210, 255, 0.35);
|
|
930
|
+
background: rgba(6, 16, 36, 0.95);
|
|
783
931
|
}
|
|
784
|
-
.red-chat-input:focus { border-color: var(--blue-bright); }
|
|
785
932
|
|
|
786
933
|
/* Buttons */
|
|
787
934
|
.btn-primary {
|