reaper-arcade-hub 2.2.0 → 2.4.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 CHANGED
@@ -1150,3 +1150,212 @@ body.turbo-mode-active #bg-canvas {
1150
1150
  to { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5); }
1151
1151
  }
1152
1152
 
1153
+ /* ==========================================
1154
+ RECODED NEXT-GEN CYBER BOOT SPLASH LOADER
1155
+ ========================================== */
1156
+ .splash-v2-container {
1157
+ max-width: 520px;
1158
+ width: 92%;
1159
+ background: rgba(4, 12, 28, 0.9);
1160
+ backdrop-filter: blur(24px);
1161
+ -webkit-backdrop-filter: blur(24px);
1162
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1163
+ border-radius: 18px;
1164
+ padding: 2.5rem 2rem;
1165
+ box-shadow: 0 0 60px rgba(0, 136, 255, 0.35), inset 0 0 30px rgba(0, 210, 255, 0.08);
1166
+ position: relative;
1167
+ overflow: hidden;
1168
+ text-align: center;
1169
+ }
1170
+
1171
+ .splash-v2-container::before {
1172
+ content: '';
1173
+ position: absolute;
1174
+ top: -50%;
1175
+ left: -50%;
1176
+ width: 200%;
1177
+ height: 200%;
1178
+ background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 60%);
1179
+ animation: rotateOrbital 12s linear infinite;
1180
+ pointer-events: none;
1181
+ }
1182
+
1183
+ @keyframes rotateOrbital {
1184
+ 0% { transform: rotate(0deg); }
1185
+ 100% { transform: rotate(360deg); }
1186
+ }
1187
+
1188
+ .splash-emblem-wrapper {
1189
+ position: relative;
1190
+ width: 80px;
1191
+ height: 80px;
1192
+ margin: 0 auto 1.25rem;
1193
+ display: flex;
1194
+ align-items: center;
1195
+ justify-content: center;
1196
+ }
1197
+
1198
+ .splash-emblem-ring {
1199
+ position: absolute;
1200
+ inset: 0;
1201
+ border-radius: 50%;
1202
+ border: 2px dashed rgba(0, 210, 255, 0.6);
1203
+ animation: spinRing 8s linear infinite;
1204
+ }
1205
+
1206
+ .splash-emblem-ring-inner {
1207
+ position: absolute;
1208
+ inset: 8px;
1209
+ border-radius: 50%;
1210
+ border: 2px solid rgba(0, 255, 170, 0.4);
1211
+ border-top-color: #00ffaa;
1212
+ animation: spinRingRev 4s linear infinite;
1213
+ }
1214
+
1215
+ @keyframes spinRing {
1216
+ from { transform: rotate(0deg); }
1217
+ to { transform: rotate(360deg); }
1218
+ }
1219
+
1220
+ @keyframes spinRingRev {
1221
+ from { transform: rotate(360deg); }
1222
+ to { transform: rotate(0deg); }
1223
+ }
1224
+
1225
+ .splash-emblem-core {
1226
+ width: 50px;
1227
+ height: 50px;
1228
+ border-radius: 50%;
1229
+ background: linear-gradient(135deg, #0088ff, #00ffaa);
1230
+ display: flex;
1231
+ align-items: center;
1232
+ justify-content: center;
1233
+ font-size: 1.6rem;
1234
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.8);
1235
+ animation: pulseCore 2s ease-in-out infinite alternate;
1236
+ }
1237
+
1238
+ @keyframes pulseCore {
1239
+ from { transform: scale(0.94); box-shadow: 0 0 15px rgba(0, 210, 255, 0.6); }
1240
+ to { transform: scale(1.06); box-shadow: 0 0 32px rgba(0, 255, 170, 0.9); }
1241
+ }
1242
+
1243
+ .splash-terminal-log {
1244
+ background: #020612;
1245
+ border: 1px solid rgba(0, 136, 255, 0.25);
1246
+ border-radius: 8px;
1247
+ padding: 0.65rem 1rem;
1248
+ font-family: var(--font-mono);
1249
+ font-size: 0.72rem;
1250
+ color: #88ffcc;
1251
+ text-align: left;
1252
+ min-height: 48px;
1253
+ display: flex;
1254
+ align-items: center;
1255
+ gap: 0.5rem;
1256
+ margin-bottom: 1.25rem;
1257
+ }
1258
+
1259
+ /* ==========================================
1260
+ RECODED KEY GATEKEEPER TERMINAL (NEXT-GEN)
1261
+ ========================================== */
1262
+ .key-terminal-card {
1263
+ max-width: 480px;
1264
+ width: 92%;
1265
+ background: rgba(4, 12, 28, 0.92);
1266
+ backdrop-filter: blur(28px);
1267
+ -webkit-backdrop-filter: blur(28px);
1268
+ border: 2px solid transparent;
1269
+ border-image: linear-gradient(135deg, #00d2ff, #7928ca, #ff0055) 1;
1270
+ border-radius: 20px;
1271
+ padding: 2.75rem 2.25rem;
1272
+ box-shadow: 0 0 70px rgba(0, 210, 255, 0.35), inset 0 0 35px rgba(121, 40, 202, 0.2);
1273
+ text-align: center;
1274
+ position: relative;
1275
+ animation: keyCardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
1276
+ }
1277
+
1278
+ @keyframes keyCardEnter {
1279
+ from { opacity: 0; transform: scale(0.93) translateY(10px); }
1280
+ to { opacity: 1; transform: scale(1) translateY(0); }
1281
+ }
1282
+
1283
+ .key-input-wrapper {
1284
+ position: relative;
1285
+ display: flex;
1286
+ align-items: center;
1287
+ margin-bottom: 1rem;
1288
+ }
1289
+
1290
+ .key-input-field {
1291
+ width: 100%;
1292
+ background: #020714;
1293
+ border: 1.5px solid rgba(0, 210, 255, 0.4);
1294
+ border-radius: 10px;
1295
+ color: #fff;
1296
+ font-family: var(--font-mono);
1297
+ font-size: 0.95rem;
1298
+ font-weight: 700;
1299
+ padding: 0.85rem 5.5rem 0.85rem 1rem;
1300
+ letter-spacing: 0.06em;
1301
+ transition: all 0.25s ease;
1302
+ }
1303
+
1304
+ .key-input-field:focus {
1305
+ outline: none;
1306
+ border-color: #00ffaa;
1307
+ box-shadow: 0 0 20px rgba(0, 255, 170, 0.4);
1308
+ background: #030b1e;
1309
+ }
1310
+
1311
+ .btn-paste-key {
1312
+ position: absolute;
1313
+ right: 8px;
1314
+ background: rgba(0, 136, 255, 0.2);
1315
+ border: 1px solid rgba(0, 210, 255, 0.4);
1316
+ color: #00d2ff;
1317
+ border-radius: 6px;
1318
+ padding: 0.35rem 0.65rem;
1319
+ font-size: 0.72rem;
1320
+ font-weight: 800;
1321
+ font-family: var(--font-heading);
1322
+ cursor: pointer;
1323
+ transition: all 0.2s ease;
1324
+ }
1325
+
1326
+ .btn-paste-key:hover {
1327
+ background: #00d2ff;
1328
+ color: #02050a;
1329
+ box-shadow: 0 0 10px #00d2ff;
1330
+ }
1331
+
1332
+ .btn-unlock-hub {
1333
+ width: 100%;
1334
+ background: linear-gradient(135deg, #00d2ff, #0088ff);
1335
+ border: none;
1336
+ color: #000;
1337
+ font-family: var(--font-heading);
1338
+ font-size: 0.95rem;
1339
+ font-weight: 900;
1340
+ letter-spacing: 0.08em;
1341
+ padding: 0.95rem;
1342
+ border-radius: 10px;
1343
+ cursor: pointer;
1344
+ transition: all 0.25s ease;
1345
+ box-shadow: 0 0 25px rgba(0, 210, 255, 0.5);
1346
+ display: flex;
1347
+ align-items: center;
1348
+ justify-content: center;
1349
+ gap: 0.5rem;
1350
+ }
1351
+
1352
+ .btn-unlock-hub:hover {
1353
+ transform: translateY(-2px);
1354
+ background: linear-gradient(135deg, #00ffaa, #00d2ff);
1355
+ box-shadow: 0 0 35px rgba(0, 255, 170, 0.8);
1356
+ }
1357
+
1358
+ .btn-unlock-hub:active {
1359
+ transform: translateY(1px);
1360
+ }
1361
+
package/index.html CHANGED
@@ -18,58 +18,66 @@
18
18
  </head>
19
19
  <body>
20
20
 
21
- <!-- 10-Second Initial Splash Screen -->
22
- <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061630 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
- <div class="splash-content" style="max-width: 580px; width: 100%; text-align: center; background: rgba(3, 10, 24, 0.85); backdrop-filter: blur(16px); border: 1.5px solid rgba(0, 136, 255, 0.4); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 136, 255, 0.25), inset 0 0 30px rgba(0, 136, 255, 0.1);">
21
+ <!-- Recoded Next-Gen Cyber Boot Splash Screen -->
22
+ <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061633 0%, #010308 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
+ <div class="splash-v2-container">
24
24
 
25
- <!-- Glowing Logo -->
26
- <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); box-shadow: 0 0 25px #0088ff; margin-bottom: 1rem;">
27
- <span style="font-size: 2rem;">⚡</span>
25
+ <!-- Pulsing Orbital Emblem -->
26
+ <div class="splash-emblem-wrapper">
27
+ <div class="splash-emblem-ring"></div>
28
+ <div class="splash-emblem-ring-inner"></div>
29
+ <div class="splash-emblem-core">⚡</div>
28
30
  </div>
29
31
 
30
- <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.2rem; text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);">reaper</h1>
31
- <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem;">788-GAME CORE ARCADE ENGINE</div>
32
+ <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.4rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.15rem; text-shadow: 0 0 25px rgba(0, 210, 255, 0.8);">reaper</h1>
33
+ <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.25rem;">TURBO ARCADE ENGINE • 788 GAMES</div>
32
34
 
33
- <!-- Live System Diagnostic Pills -->
34
- <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
35
- <span style="font-size: 0.65rem; color: #00ffaa; background: #020814; border: 1px solid #00ffaa; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">⚡ FASTLY CDN: ONLINE</span>
36
- <span style="font-size: 0.65rem; color: #00d2ff; background: #020814; border: 1px solid #00d2ff; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🛡️ SPY SHIELD: ARMED</span>
37
- <span style="font-size: 0.65rem; color: #ffd700; background: #020814; border: 1px solid #ffd700; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🎮 788 GAMES: READY</span>
35
+ <!-- Live Terminal Kernel Log -->
36
+ <div class="splash-terminal-log" id="splash-terminal-box">
37
+ <span style="color: #00ffaa; font-weight: 900;">❯</span>
38
+ <span id="splash-terminal-text" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[BOOT] Initializing high-speed core kernel...</span>
38
39
  </div>
39
40
 
40
- <!-- Dynamic Rotating Cyber Feel-Good Quotes -->
41
- <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 8px; padding: 0.75rem 1.2rem; margin-bottom: 1.5rem;">
42
- <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.88rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.4;">"You are capable of more than you know. Lock in and dominate today."</div>
41
+ <!-- Dynamic Rotating Motivational Quotes -->
42
+ <div class="splash-quote-wrapper" style="min-height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 18, 0.85); border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 10px; padding: 0.65rem 1rem; margin-bottom: 1.25rem;">
43
+ <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.84rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: all 0.25s ease; line-height: 1.4;">"Lock in and dominate today. 788 games ready with zero lag."</div>
43
44
  </div>
44
45
 
45
- <div class="splash-progress-track" style="height: 8px; background: #020714; border: 1px solid var(--blue-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
46
- <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 6px; transition: width 0.1s linear; box-shadow: 0 0 12px #00d2ff;"></div>
46
+ <!-- Progress Track -->
47
+ <div class="splash-progress-track" style="height: 9px; background: #020714; border: 1px solid rgba(0, 210, 255, 0.4); border-radius: 8px; overflow: hidden; margin-bottom: 0.75rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);">
48
+ <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 8px; transition: width 0.08s linear; box-shadow: 0 0 16px #00d2ff;"></div>
47
49
  </div>
48
50
  <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.75rem; color: #88aacc; font-weight: 700;">[0%] INITIALIZING REAPER CORE...</div>
49
51
  </div>
50
52
  </div>
51
53
 
52
- <!-- Key Gatekeeper Modal (In-Page Clean UI) -->
53
- <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
54
- <div class="admin-window" style="max-width: 480px; text-align: center; border-color: var(--blue-primary); box-shadow: 0 0 45px var(--blue-glow); padding: 2.5rem 2rem;">
55
- <div style="font-family: var(--font-logo); font-size: 3.5rem; color: #fff; font-weight: 900; margin-bottom: 0.25rem; letter-spacing: 0.1em;">reaper</div>
56
- <div style="color: #00d2ff; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.25rem;">AUTHENTICATION REQUIRED</div>
57
- <p style="color: #adc4e2; font-size: 0.88rem; margin-bottom: 1.5rem; line-height: 1.6;">
58
- To protect server stability, Reaper requires an active access key or session token. Enter your key directly below or verify on the gateway.
54
+ <!-- Recoded Next-Gen Key Gatekeeper Terminal -->
55
+ <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, rgba(6, 20, 48, 0.95) 0%, rgba(1, 3, 8, 0.98) 100%);">
56
+ <div class="key-terminal-card">
57
+ <div style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #00d2ff, #7928ca); box-shadow: 0 0 25px rgba(0, 210, 255, 0.7); margin-bottom: 0.85rem;">
58
+ <span style="font-size: 1.8rem;">🔒</span>
59
+ </div>
60
+
61
+ <div style="font-family: var(--font-logo); font-size: 3.2rem; color: #fff; font-weight: 900; margin-bottom: 0.15rem; letter-spacing: 0.1em; text-shadow: 0 0 25px rgba(0, 210, 255, 0.6);">reaper</div>
62
+ <div style="color: #00ffaa; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.25rem;">ACCESS AUTHORIZATION REQUIRED</div>
63
+
64
+ <p style="color: #adc4e2; font-size: 0.86rem; margin-bottom: 1.5rem; line-height: 1.6;">
65
+ Enter your session key or master owner token (<code style="color: #ffd700; background: #020714; padding: 2px 6px; border-radius: 4px; font-weight: 800;">679-102</code>) to unlock the full 788-game core hub.
59
66
  </p>
60
67
 
61
- <!-- In-Page Direct Key & Master Token Input Box -->
62
- <div style="background: #040c18; border: 1.5px solid var(--blue-border); border-radius: 8px; padding: 1.2rem; text-align: left; margin-bottom: 1.25rem;">
63
- <div style="font-size: 0.78rem; color: #88aacc; font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase;">ENTER ACCESS KEY OR MASTER TOKEN:</div>
64
- <input type="text" id="gate-token-input" class="red-chat-input" placeholder="ENTER KEY (E.G. REAPER-123)" autocomplete="off" style="margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.88rem; padding: 0.75rem 1rem;" onkeydown="if(event.key==='Enter') app.submitGateToken()">
65
- <button class="btn-primary" style="width: 100%; justify-content: center; padding: 0.75rem;" onclick="app.submitGateToken()">
66
- UNLOCK & ENTER REAPER
67
- </button>
68
+ <!-- Key Input Box with Built-In Paste Button -->
69
+ <div class="key-input-wrapper">
70
+ <input type="text" id="gate-token-input" class="key-input-field" placeholder="REAPER-KEY OR 679-102" autocomplete="off" onkeydown="if(event.key==='Enter') app.submitGateToken()">
71
+ <button type="button" class="btn-paste-key" onclick="app.pasteKeyFromClipboard()">📋 PASTE</button>
68
72
  </div>
69
73
 
70
- <div>
71
- <button class="btn-stealth" style="width: 100%; justify-content: center; font-size: 0.8rem;" onclick="app.redirectToVerify()">
72
- OPEN VERIFICATION GATEWAY PAGE ➔
74
+ <button class="btn-unlock-hub" onclick="app.submitGateToken()">
75
+ <span>⚡ UNLOCK CORE HUB</span>
76
+ </button>
77
+
78
+ <div style="margin-top: 1.25rem; display: flex; justify-content: center; gap: 0.75rem;">
79
+ <button class="btn-stealth" style="font-size: 0.78rem; color: #88ccff;" onclick="app.redirectToVerify()">
80
+ 🔑 Need an access key? Verify at Gateway ➔
73
81
  </button>
74
82
  </div>
75
83
  </div>
@@ -280,6 +288,16 @@
280
288
  <input type="checkbox" id="mod-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00ffaa;" onchange="app.toggleSlowMode(this.checked)">
281
289
  </div>
282
290
 
291
+ <!-- Live Online Users for Mods -->
292
+ <div class="mod-section">
293
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
294
+ <h3 style="font-size: 0.95rem; color: #00e676;">🟢 ACTIVE PLAYERS ONLINE (REALTIME)</h3>
295
+ <button onclick="app.renderModUsersDirectory()" class="btn-stealth" style="font-size: 0.75rem;">REFRESH</button>
296
+ </div>
297
+ <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">See connected users, their rank, and their active site version.</p>
298
+ <div id="mod-users-directory" style="max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;"></div>
299
+ </div>
300
+
283
301
  <!-- Timeout User Box -->
284
302
  <div class="mod-section">
285
303
  <h3 style="font-size: 0.95rem; color: #fff; margin-bottom: 0.35rem;">TIMEOUT / MUTE USER</h3>
@@ -320,11 +338,15 @@
320
338
  <!-- Superpower 1: Live Real-Time Analytics Dashboard -->
321
339
  <div class="admin-section" style="border-color: #00d2ff; background: rgba(0, 210, 255, 0.05);">
322
340
  <h3 style="font-size: 0.95rem; color: #00d2ff; margin-bottom: 0.6rem;">📊 LIVE HUB SYSTEM ANALYTICS</h3>
323
- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem;">
341
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.65rem;">
324
342
  <div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
325
343
  <div style="font-size: 0.7rem; color: #88aacc;">TOTAL GAMES</div>
326
344
  <div style="font-size: 1.3rem; font-weight: 800; color: #00ffaa;" id="admin-stat-games">788</div>
327
345
  </div>
346
+ <div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
347
+ <div style="font-size: 0.7rem; color: #88aacc;">ONLINE USERS</div>
348
+ <div style="font-size: 1.3rem; font-weight: 800; color: #00e676;" id="admin-stat-online">1</div>
349
+ </div>
328
350
  <div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
329
351
  <div style="font-size: 0.7rem; color: #88aacc;">TURBO CACHED</div>
330
352
  <div style="font-size: 1.3rem; font-weight: 800; color: #00d2ff;" id="admin-stat-cached">0</div>
@@ -340,6 +362,21 @@
340
362
  </div>
341
363
  </div>
342
364
 
365
+ <!-- Superpower 6: Cross-Site Version Control & Auto-Forwarder -->
366
+ <div class="admin-section" style="border-color: #00ffaa; background: #02140a;">
367
+ <h3 style="font-size: 0.95rem; color: #00ffaa; margin-bottom: 0.4rem;">🌐 GLOBAL VERSION CONTROLLER &amp; AUTO-REDIRECT</h3>
368
+ <p style="color: #88ffcc; font-size: 0.8rem; margin-bottom: 0.75rem;">
369
+ When you publish a new version, update this once. Any user visiting ANY old version (1.0.9, 2.0.x, etc.) will be notified and instantly brought to the new site!
370
+ </p>
371
+ <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.65rem;">
372
+ <input type="text" id="admin-latest-version-input" class="red-chat-input" placeholder="Latest Version (e.g. 2.3.0)" value="2.3.0" style="max-width: 140px;">
373
+ <input type="text" id="admin-latest-url-input" class="red-chat-input" placeholder="New UNPKG URL" value="https://unpkg.com/reaper-arcade-hub@2.3.0/main/index.html" style="flex: 1; min-width: 250px;">
374
+ <button class="btn-primary" style="background: #00e676; color: #02050a; font-weight: 900; border-color: #00ff88;" onclick="app.publishLatestVersionToFirebase()">
375
+ BROADCAST VERSION &amp; FORWARD ALL SITES
376
+ </button>
377
+ </div>
378
+ </div>
379
+
343
380
  <!-- Superpower 2: Global Enforce Turbo Mode (Anti-Lag Broadcast) -->
344
381
  <div class="admin-section" style="border-color: #00ffaa; background: #03140c;">
345
382
  <div style="display: flex; justify-content: space-between; align-items: center;">
@@ -412,14 +449,14 @@
412
449
  </div>
413
450
  </div>
414
451
 
415
- <!-- Connected Players Directory (With Promote/Demote/Kick/Ban) -->
452
+ <!-- Connected Real Players Directory (With Version & Controls) -->
416
453
  <div class="admin-section">
417
454
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
418
- <h3 style="font-size: 0.95rem; color: #fff;">LIVE PLAYERS DIRECTORY &amp; ROLES</h3>
455
+ <h3 style="font-size: 0.95rem; color: #00e676;">🟢 REALTIME ONLINE PLAYERS (ZERO BOTS)</h3>
419
456
  <button onclick="app.renderAdminUsersDirectory()" class="btn-stealth" style="font-size: 0.75rem;">REFRESH LIST</button>
420
457
  </div>
421
- <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Manage connected users, promote to Chat Mod, de-rank, kick, or permanently ban.</p>
422
- <div id="admin-users-directory" style="max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;"></div>
458
+ <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Active real players currently connected to the hub. View their current site version, rank, and moderation actions.</p>
459
+ <div id="admin-users-directory" style="max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;"></div>
423
460
  </div>
424
461
 
425
462
  <!-- Custom Access Key Generator -->