:root {--bg-deep: #0a0a0a;--bg-panel: #111111;--bg-card: #0f0f0f;--bg-glass: rgba(255,255,255,0.025);--text-main: #ffffff;--text-muted: #888888;--text-dim: #444444;--amber: #FF6B00;--amber-glow: rgba(255,107,0,0.45);--neon-cyan: #00f3ff;--neon-pink: #ff0055;--neon-green: #0aff00;--neon-gold: #ffd700;--alert-red: #ff4d4d;--font-head: 'Orbitron',sans-serif;--font-body: 'Rajdhani',sans-serif;--font-tech: 'Roboto',sans-serif;}
* {margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;}
::-webkit-scrollbar {width:6px;}
::-webkit-scrollbar-track {background:var(--bg-deep);}
::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.18);border-radius:4px;}
body {font-family:var(--font-body);background-color:var(--bg-deep);color:var(--text-main);overflow-x:hidden;background-image:
radial-gradient(circle at 14% 18%,rgba(255,255,255,0.05) 0%,transparent 38%),radial-gradient(circle at 86% 82%,rgba(255,255,255,0.03) 0%,transparent 32%);}
body::before {content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(118deg,rgba(255,107,0,0.04),transparent 38%,rgba(255,255,255,0.016) 65%,transparent);animation:ambientShift 25s ease-in-out infinite alternate;will-change: opacity;}
body::after {content:'';position:fixed;top:0;left:0;width:100vw;height:100vh;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.01) 2px,rgba(255,255,255,0.01) 4px);pointer-events:none;z-index:9999;opacity:0.4;}
header {position:fixed;top:0;width:100%;z-index:1000;background:rgba(8,8,8,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,107,0,0.25);padding:10px 20px;display:flex;justify-content:center;align-items:center;height:70px;}
.nav-btn {display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid rgba(255,107,0,0.5);border-radius:6px;color:var(--amber);background:rgba(255,107,0,0.07);font-family:var(--font-head);font-size:0.72rem;font-weight:bold;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;transition:background 0.25s,box-shadow 0.25s,transform 0.2s;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.nav-btn:link,.nav-btn:visited {color: var(--amber);}
.nav-btn:hover {background:rgba(255,107,0,0.18);box-shadow:0 0 18px rgba(255,107,0,0.4);transform:translateY(-1px);}
.nav-btn.active-nav {background:var(--amber);color:#000;border-color:var(--amber);box-shadow:0 0 18px rgba(255,107,0,0.5);}
.nav-btn.active-nav:link,.nav-btn.active-nav:visited {color: #000;}
@media (max-width:600px) {.nav-btn .nav-label {display:none;}
.nav-btn {padding:8px 10px;}}
.logo {display:flex;align-items:center;gap:2px;text-decoration:none;color:#fff;transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),filter 0.4s;}
.logo:hover {transform:translateY(-1px) scale(1.04);filter:drop-shadow(0 0 14px rgba(255,255,255,0.28));}
.brand-word {font-family:var(--font-head);font-weight:900;font-size:1.15rem;letter-spacing:5px;text-transform:uppercase;color:#ffffff;text-shadow:0 0 20px rgba(255,107,0,0.5);}
.vault-svg-wrap {display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;animation:vaultBreath 3.8s ease-in-out infinite;flex-shrink:0;}
.vault-svg-wrap svg {width:100%;height:100%;overflow:visible;}
.vault-wheel {animation:vaultSpin 9s linear infinite;transform-box:fill-box;transform-origin:center;}
.vault-svg-wrap:hover .vault-wheel {animation:vaultSpin 1.3s linear infinite;}
.logo.is-open .vault-svg-wrap {animation:vaultBurst 0.55s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
header a[href*="youtube"] {transition:0.3s;}
header a[href*="youtube"]:hover {transform:scale(1.12);filter:drop-shadow(0 0 12px rgba(255,255,255,0.5));color:#fff !important;}
.vault-burst-layer {position:fixed;inset:0;pointer-events:none;z-index:1200;overflow:hidden;}
.burst-token {position:absolute;width:46px;height:46px;border-radius:10px;background-size:cover;background-position:center;border:2px solid rgba(255,107,0,0.7);box-shadow:0 0 18px rgba(255,107,0,0.45);animation:tokenScatter 1.9s cubic-bezier(0.25,0.46,0.45,0.94) forwards;}
@keyframes tokenScatter {0% {transform:translate(0,0) scale(0.25) rotate(0deg);opacity:0;}
12% {opacity:1;}
100% {transform:translate(var(--dx),var(--dy)) scale(0.85) rotate(var(--rot));opacity:0;}}
.hero {height:60vh;min-height:450px;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 20px 40px;position:relative;background:linear-gradient(to bottom,rgba(5,5,7,0.8),var(--bg-deep)),url('https://i.postimg.cc/Znt8nSBW/Background-photo.png');background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,0.06);}
.hero-content {max-width:900px;z-index:2;animation:fadeIn 0.8s ease-out;}
.hero h1 {font-family:var(--font-head);font-size:clamp(2.2rem,10vw,4rem);color:var(--text-main);text-transform:uppercase;line-height:1.1;margin-bottom:20px;}
.hero h1 span {display:block;margin-top:10px;font-size:0.6em;letter-spacing:5px;color:#fff;text-shadow:0 0 28px rgba(255,255,255,0.65);}
.hero p {font-size:clamp(0.9rem,4vw,1.15rem);color:var(--text-muted);margin:0 auto;max-width:750px;line-height:1.6;animation:fadeIn 1s ease-out 0.2s backwards;}
.cta-btn {padding:14px 40px;background:#ffffff;color:#000000;font-family:var(--font-head);font-weight:700;text-decoration:none;text-transform:uppercase;border-radius:4px;transition:0.3s;display:inline-block;border:none;cursor:pointer;box-shadow:0 0 22px rgba(255,255,255,0.3);position:relative;overflow:hidden;z-index:1;}
.cta-btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);transition:0.5s;z-index:-1;}
.cta-btn:hover {transform:translateY(-3px);box-shadow:0 0 40px rgba(255,107,0,0.65);}
.cta-btn:hover::before {left:100%;}
.controls-section {padding:0 20px;margin-top:-40px;position:relative;z-index:10;}
.hud-panel {background:#111111;border:1px solid rgba(255,255,255,0.09);backdrop-filter:blur(15px);padding:25px;border-radius:12px;box-shadow:0 15px 45px rgba(0,0,0,0.75),0 0 0 1px rgba(255,255,255,0.04);display:flex;flex-direction:row;align-items:stretch;gap:30px;position:relative;overflow:hidden;}
.hud-panel::before {content:'';position:absolute;top:-1px;left:-1px;width:20px;height:20px;border-top:2px solid var(--amber);border-left:2px solid var(--amber);}
.hud-panel::after {content:'';position:absolute;bottom:-1px;right:-1px;width:20px;height:20px;border-bottom:2px solid var(--amber);border-right:2px solid var(--amber);}
.hud-left {flex:1;display:flex;flex-direction:column;justify-content:center;gap:15px;min-width:0;border-right:1px solid rgba(255,255,255,0.05);padding-right:15px;}
.hud-right {flex:0 0 380px;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.carousel-container {position:relative;width:100%;display:flex;align-items:center;gap:15px;}
.carousel-arrow {width:40px;height:40px;min-height:40px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:0.3s;font-size:1rem;}
.carousel-arrow:hover {background:var(--amber);color:#000;box-shadow:0 0 22px rgba(255,107,0,0.65);border-color:var(--amber);}
.carousel-title {font-size:0.9rem;color:#fff;font-family:var(--font-head);margin-bottom:15px;letter-spacing:3px;font-weight:bold;text-shadow:0 0 12px rgba(255,255,255,0.35);}
.carousel-3d {flex:1;height:210px;perspective:1200px;position:relative;}
.carousel-item {width:100%;height:100%;position:absolute;top:0;left:0;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,0.12);box-shadow:0 10px 30px rgba(0,0,0,0.5);transition:transform 1.2s cubic-bezier(0.34,1.56,0.64,1),opacity 0.8s ease;opacity:0;transform:rotateY(90deg) translateZ(100px) scale(0.8);cursor:pointer;pointer-events:none;}
.carousel-item.active {opacity:1;transform:rotateY(0deg) translateZ(0) scale(1);z-index:5;pointer-events:auto;border-color:var(--amber);box-shadow:0 0 40px rgba(255,107,0,0.3),0 10px 30px rgba(0,0,0,0.5);}
.carousel-item.prev {opacity:0;transform:rotateY(-90deg) translateZ(100px) scale(0.8);z-index:1;}
.carousel-item img {width:100%;height:100%;object-fit:cover;transition:0.5s;}
.carousel-item:hover img {transform:scale(1.1);}
.carousel-item .mini-title {position:absolute;bottom:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,0.95),transparent);color:#fff;text-align:center;padding:25px 5px 10px;font-size:0.85rem;font-family:var(--font-head);font-weight:bold;}
.categories {display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.18) transparent;}
.categories::-webkit-scrollbar {height:4px;}
.categories::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.2);border-radius:10px;}
.cat-btn {background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--text-muted);padding:10px 20px;border-radius:6px;cursor:pointer;font-family:var(--font-head);font-size:0.8rem;white-space:nowrap;transition:0.3s;text-transform:uppercase;letter-spacing:1px;min-height:48px;}
.cat-btn:hover {background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3);color:#fff;}
.cat-btn.active {background:var(--amber);color:#000000;border-color:var(--amber);box-shadow:0 0 18px rgba(255,107,0,0.5);animation:pulseBorderA 2.5s infinite alternate;}
@keyframes pulseBorderA {0%{box-shadow:0 0 8px rgba(255,107,0,0.3);} 100%{box-shadow:0 0 28px rgba(255,107,0,0.75);}}
.search-box {position:relative;width:100%;}
.search-box i {position:absolute;left:20px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.45);font-size:1.2rem;pointer-events:none;}
.search-input {width:100%;background:rgba(0,0,0,0.55);border:2px solid rgba(255,255,255,0.1);padding:16px 16px 16px 55px;color:white;font-family:var(--font-body);font-size:1.2rem;border-radius:8px;transition:0.3s;box-shadow:inset 0 2px 10px rgba(0,0,0,0.3);}
.search-input::placeholder {color:rgba(255,255,255,0.3);}
.search-input:focus {border-color:var(--amber);background:rgba(0,0,0,0.72);box-shadow:0 0 22px rgba(255,107,0,0.18);}
@media (max-width:900px) {.hud-panel {flex-direction:column-reverse;align-items:stretch;gap:20px;padding:20px;}
.hud-left {flex:none;border-right:none;padding-right:0;}
.hud-right {flex:none;border-bottom:1px solid rgba(255,255,255,0.05);padding-bottom:25px;}
.carousel-3d {max-width:500px;height:220px;}
.search-input {padding:12px 12px 12px 45px;font-size:1rem;}}
.main-container {padding:40px 20px 80px;max-width:1400px;margin:0 auto;}
.section-header {margin-bottom:25px;border-bottom:1px solid rgba(255,255,255,0.07);padding-bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;}
.section-title {font-family:var(--font-head);font-size:1.5rem;color:var(--text-main);}
.section-title span {color:#ffffff;text-shadow:0 0 18px rgba(255,255,255,0.35);}
.games-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;}
.game-card {background:#111111;border:1px solid rgba(255,255,255,0.07);border-radius:8px;overflow:hidden;position:relative;transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s;cursor:pointer;display:flex;flex-direction:column;min-height:260px;}
.game-card:active {transform:scale(0.97);}
@media (min-width:768px) {.game-card:hover {transform:translateY(-8px);border-color:rgba(255,255,255,0.3);box-shadow:0 12px 30px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);}}
.card-img-container {height:130px;position:relative;overflow:hidden;background:#111;}
.card-img-container img {width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.game-card:hover .card-img-container img {transform:scale(1.08);}
.badge-cat {position:absolute;top:0;right:0;background:#ffffff;color:#000000;padding:3px 8px;font-family:var(--font-head);font-size:0.65rem;font-weight:bold;clip-path:polygon(10% 0,100% 0,100% 100%,0% 100%);}
.card-content {padding:12px;flex-grow:1;display:flex;flex-direction:column;}
.game-title {font-family:var(--font-head);font-size:1rem;color:#C8CEE0;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px rgba(200,206,224,0.3);}
.info-row {display:flex;justify-content:space-between;font-size:0.75rem;color:#9A9AA8;margin-bottom:8px;}
.info-row i {color:rgba(200,206,224,0.4);margin-right:5px;}
.play-btn {margin-top:auto;width:100%;padding:8px;background:transparent;border:1px solid rgba(255,107,0,0.3);color:var(--amber);text-align:center;font-family:var(--font-head);font-weight:bold;font-size:0.75rem;text-transform:uppercase;border-radius:3px;pointer-events:none;transition:0.3s;}
.game-card:hover .play-btn {border-color:var(--amber);background:rgba(255,107,0,0.08);box-shadow:0 0 10px rgba(255,107,0,0.2);}
.game-card.legendary {border:2px solid #e6b800 !important;background:linear-gradient(145deg,#18130a,#120e00,#0e0e0e) !important;box-shadow:0 0 25px rgba(255,195,0,0.3) !important;z-index:2;}
.game-card.legendary.in-view {animation:legendaryPulse 3.5s infinite alternate;}
.game-card.legendary::before {content:'⚡ LEGENDARY';position:absolute;top:10px;left:0;z-index:5;background:linear-gradient(90deg,#ffc200,#ffd700,#ffae00,#ffd700);background-size:250% auto;animation:goldShineLabel 2.5s linear infinite;color:#000;font-family:var(--font-head);font-weight:900;font-size:0.6rem;padding:3px 14px 3px 10px;border-radius:0 4px 4px 0;box-shadow:0 0 22px rgba(255,210,0,0.85),2px 2px 10px rgba(0,0,0,0.6);letter-spacing:1.5px;}
.game-card.legendary::after {content:'';position:absolute;top:-150%;left:-150%;width:300%;height:300%;background:linear-gradient(50deg,transparent 35%,rgba(255,215,0,0.18) 50%,transparent 65%);animation:goldShimmer 3.5s ease-in-out infinite;pointer-events:none;}
@keyframes legendaryPulse {0% {box-shadow:0 0 20px rgba(255,195,0,0.4),inset 0 0 20px rgba(255,215,0,0.03);}
100% {box-shadow:0 0 55px rgba(255,215,0,0.85),0 0 80px rgba(255,180,0,0.2),inset 0 0 30px rgba(255,215,0,0.07);}}
@keyframes goldShineLabel {0%{background-position:0% center;} 100%{background-position:250% center;}}
@keyframes goldShimmer {0%{transform:translateX(-100%) rotate(-20deg);} 35%,100%{transform:translateX(100%) rotate(-20deg);}}
.game-card.legendary .badge-cat {background:linear-gradient(90deg,#ffd700,#ffae00);color:#000;box-shadow:0 0 12px rgba(255,215,0,0.6);}
.game-card.hot-tag {border:2px solid var(--neon-pink) !important;background:linear-gradient(145deg,#1a0008,#0f0f0f) !important;box-shadow:0 0 22px rgba(255,0,85,0.25) !important;z-index:1;}
.game-card.hot-tag.in-view {animation:hotPulse 2.8s infinite alternate;}
.game-card.hot-tag::before {content:'🔥 HOT';position:absolute;top:10px;left:0;z-index:5;background:linear-gradient(90deg,#cc0044,var(--neon-pink),#ff4488);color:#fff;font-family:var(--font-head);font-weight:900;font-size:0.65rem;padding:3px 14px 3px 10px;border-radius:0 4px 4px 0;box-shadow:0 0 18px rgba(255,0,85,0.9);animation:hotFlicker 1.8s ease-in-out infinite alternate;}
.game-card.hot-tag::after {content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,0,85,0.08) 0%,transparent 55%);pointer-events:none;}
@keyframes hotPulse {0%{box-shadow:0 0 15px rgba(255,0,85,0.3);} 100%{box-shadow:0 0 45px rgba(255,0,85,0.75),0 0 90px rgba(255,0,85,0.15);}}
@keyframes hotFlicker {0%{opacity:1;text-shadow:0 0 8px rgba(255,0,85,0.9);} 60%{opacity:0.84;} 100%{opacity:1;text-shadow:0 0 18px rgba(255,80,140,1);}}
.game-card.hot-tag .badge-cat {background:var(--neon-pink);color:#fff;box-shadow:0 0 10px rgba(255,0,85,0.55);}
.game-card.new-tag {border:2px solid var(--neon-green) !important;background:linear-gradient(145deg,#001200,#0f0f0f) !important;box-shadow:0 0 22px rgba(10,255,0,0.2) !important;z-index:1;}
.game-card.new-tag.in-view {animation:newPulse 3.5s infinite ease-in-out;}
.game-card.new-tag::before {content:'✦ NEW';position:absolute;top:10px;left:0;z-index:5;background:linear-gradient(90deg,#00aa00,var(--neon-green),#00cc00);color:#000;font-family:var(--font-head);font-weight:900;font-size:0.65rem;padding:3px 14px 3px 10px;border-radius:0 4px 4px 0;box-shadow:0 0 18px rgba(10,255,0,0.9);animation:newGlow 2s ease-in-out infinite alternate;}
.game-card.new-tag::after {content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,255,0,0.07) 0%,transparent 55%);pointer-events:none;}
@keyframes newPulse {0%,100%{box-shadow:0 0 15px rgba(10,255,0,0.2);} 50%{box-shadow:0 0 40px rgba(10,255,0,0.55),0 0 70px rgba(10,255,0,0.12);}}
@keyframes newGlow {0%{box-shadow:0 0 8px rgba(10,255,0,0.7);} 100%{box-shadow:0 0 22px rgba(10,255,0,1);}}
.game-card.new-tag .badge-cat {background:var(--neon-green);color:#000;box-shadow:0 0 10px rgba(10,255,0,0.55);}
.modal-overlay {position:fixed;inset:0;background:rgba(0,0,0,0.93);z-index:2000;display:none;justify-content:center;align-items:center;backdrop-filter:blur(14px);padding:20px;overflow-y:auto;}
.view-modal {background:#0f0f0f;border:1px solid rgba(255,255,255,0.14);width:100%;max-width:600px;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;box-shadow:0 0 60px rgba(255,255,255,0.07),0 25px 70px rgba(0,0,0,0.85);animation:modalPopEnhance 0.35s cubic-bezier(0.175,0.885,0.32,1.275);margin:auto;}
@keyframes modalPopEnhance {0%{transform:scale(0.82) translateY(50px);opacity:0;filter:blur(10px);} 100%{transform:scale(1) translateY(0);opacity:1;filter:blur(0);}}
.close-modal {position:absolute;top:15px;right:15px;z-index:2010;width:32px;height:32px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;cursor:pointer;border:1px solid rgba(255,255,255,0.2);transition:0.3s;}
.close-modal:hover {background:#ffffff;color:#000;box-shadow:0 0 18px rgba(255,255,255,0.5);}
.modal-view {display:none;}
.modal-view.active {display:block;}
.view-header {height:220px;position:relative;flex-shrink:0;}
.view-header img {width:100%;height:100%;object-fit:cover;}
.view-header::after {content:'';position:absolute;inset:0;background:linear-gradient(to top,#0f0f0f,transparent);}
.view-content {padding:25px;}
.view-title {font-family:var(--font-head);font-size:2rem;color:#ffffff;margin-bottom:10px;line-height:1.2;text-shadow:0 0 18px rgba(255,255,255,0.22);}
.view-meta {display:flex;gap:15px;border-bottom:1px solid rgba(255,255,255,0.07);padding-bottom:15px;margin-bottom:15px;color:var(--text-muted);font-size:0.9rem;}
.view-desc {font-size:1rem;line-height:1.6;color:#cccccc;margin-bottom:25px;white-space:pre-wrap;font-family:var(--font-body);}
.init-btn {width:100%;padding:18px;background:var(--amber);color:#000000;text-align:center;text-decoration:none;font-family:var(--font-head);font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:1.5px;border-radius:4px;border:none;cursor:pointer;position:relative;overflow:hidden;transition:0.3s;box-shadow:0 0 28px rgba(255,107,0,0.4);}
.init-btn:hover {box-shadow:0 0 50px rgba(255,107,0,0.8);transform:scale(1.02);}
.init-btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);animation:glitch 3s infinite;}
@keyframes glitch {0%{left:-100%;} 20%{left:100%;} 100%{left:100%;}}
.locker-container {padding:25px;font-family:var(--font-tech);background:#0a0a0a;}
.terminal-header {border-bottom:1px solid rgba(255,255,255,0.14);padding-bottom:10px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;}
.terminal-title {color:#ffffff;font-family:var(--font-head);font-size:1.1rem;letter-spacing:1px;}
.terminal-status {color:var(--text-muted);font-size:0.8rem;animation:blink 1s infinite;}
@keyframes blink {50%{opacity:0.3;}}
.locker-info-box {background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);padding:15px;border-radius:8px;margin-bottom:20px;display:flex;align-items:center;gap:15px;}
.locker-img {width:60px;height:60px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,0.2);}
.locker-text h4 {color:white;font-family:var(--font-head);margin-bottom:5px;}
.locker-text p {color:var(--text-muted);font-size:0.8rem;}
.progress-section {margin-bottom:20px;background:#000;padding:15px;border:1px solid rgba(255,255,255,0.07);border-radius:8px;}
.progress-label {display:flex;justify-content:space-between;color:var(--text-muted);font-size:0.8rem;margin-bottom:8px;}
.progress-track {height:8px;background:#1a1a1a;border-radius:4px;overflow:hidden;}
.progress-fill {height:100%;width:0%;background:linear-gradient(90deg,rgba(255,255,255,0.5),#ffffff);box-shadow:0 0 14px rgba(255,255,255,0.6);transition:width 0.5s ease;}
.steps-container {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.step-card {background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);padding:16px 10px;border-radius:8px;text-align:center;position:relative;transition:0.3s;}
.step-card:hover {border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.05);}
.step-num {position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:24px;height:24px;background:var(--amber);color:#000000;font-weight:900;font-size:0.7rem;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 0 14px rgba(255,107,0,0.65);}
.step-card h5 {color:#ffffff;font-size:0.68rem;margin-bottom:5px;font-family:var(--font-head);margin-top:10px;letter-spacing:1.2px;}
.step-card p {color:var(--text-muted);font-size:0.6rem;line-height:1.35;}
.offers-list {display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.offer-card {background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);padding:14px 16px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;transition:0.3s;cursor:pointer;}
.offer-card:hover {border-color:rgba(255,255,255,0.32);background:rgba(255,255,255,0.06);box-shadow:0 0 18px rgba(255,255,255,0.07);}
.offer-card.completed {border-color:var(--neon-green);background:rgba(10,255,0,0.06);opacity:0.8;pointer-events:none;}
.offer-info {flex:1;padding-right:10px;}
.offer-title-text {color:white;font-size:0.9rem;font-weight:500;margin-bottom:3px;}
.offer-desc {color:var(--text-muted);font-size:0.75rem;}
.offer-action {background:var(--amber);color:#000000;padding:8px 14px;border-radius:4px;font-size:0.75rem;font-weight:bold;font-family:var(--font-head);border:none;white-space:nowrap;transition:0.3s;box-shadow:0 0 12px rgba(255,107,0,0.35);min-height:36px;display:flex;align-items:center;}
.offer-card:hover .offer-action {box-shadow:0 0 22px rgba(255,107,0,0.7);}
.offer-card.completed .offer-action {background:var(--neon-green);color:black;box-shadow:0 0 12px rgba(10,255,0,0.45);}
.locker-video {margin-top:20px;border-top:1px solid rgba(255,255,255,0.05);padding-top:20px;}
.video-container {position:relative;padding-bottom:56.25%;height:0;background:#000;overflow:hidden;border-radius:8px;border:1px solid rgba(255,255,255,0.07);}
.video-container iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
.unlock-btn {width:100%;padding:16px;min-height:52px;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.1);font-family:var(--font-head);font-weight:bold;font-size:1rem;border-radius:6px;cursor:not-allowed;margin-top:15px;text-transform:uppercase;transition:0.3s;}
.unlock-btn.active {background:var(--amber);color:#000;cursor:pointer;border-color:var(--amber);box-shadow:0 0 32px rgba(255,107,0,0.6);animation:unlockPulse 2s infinite;}
@keyframes unlockPulse {0%{box-shadow:0 0 0 0 rgba(255,107,0,0.6);} 70%{box-shadow:0 0 0 14px rgba(255,107,0,0);} 100%{box-shadow:0 0 0 0 rgba(255,107,0,0);}}
.spinner {width:20px;height:20px;border:2px solid rgba(255,255,255,0.12);border-top:2px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite;margin:20px auto;}
@keyframes spin {0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
.community-section {background:var(--bg-glass);padding:60px 20px;border-top:1px solid rgba(255,255,255,0.05);text-align:center;margin-top:20px;}
.comm-grid {display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:30px;}
.comm-card {background:#111111;padding:35px 30px;width:250px;border:1px solid rgba(255,255,255,0.08);transition:0.3s;border-radius:10px;}
.comm-card:hover {border-color:rgba(255,255,255,0.38);transform:translateY(-6px);box-shadow:0 0 28px rgba(255,255,255,0.1);}
.comm-card i {font-size:2.5rem;color:#ffffff;margin-bottom:20px;opacity:0.78;}
.comm-card h3 {font-family:var(--font-head);color:white;margin-bottom:10px;}
.support-form input,.support-form textarea {width:100%;padding:14px;margin-bottom:15px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:white;font-family:var(--font-body);font-size:1rem;border-radius:6px;transition:0.3s;}
.support-form input:focus,.support-form textarea:focus {border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.07);box-shadow:0 0 18px rgba(255,255,255,0.08);outline:none;}
.seo-section {padding:60px 20px;max-width:1200px;margin:40px auto;border-top:1px solid rgba(255,255,255,0.06);position:relative;z-index:10;}
.seo-intro h1 {font-family:var(--font-head);font-size:2rem;color:#ffffff;margin-bottom:20px;text-transform:uppercase;text-shadow:0 0 22px rgba(255,255,255,0.18);}
.seo-intro p {color:var(--text-muted);line-height:1.6;margin-bottom:30px;}
.keyword-bold {color:var(--amber);font-weight:700;text-shadow:0 0 10px rgba(255,107,0,0.3);}
.seo-accordion {display:flex;flex-direction:column;gap:15px;}
.accordion-item {background:#111111;border:1px solid rgba(255,255,255,0.07);border-radius:8px;overflow:hidden;transition:0.3s;}
.accordion-header {padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);color:var(--text-main);text-transform:uppercase;font-size:1.1rem;transition:0.3s;}
.accordion-header:hover {background:rgba(255,255,255,0.04);color:#fff;}
.accordion-header i {transition:transform 0.3s;color:rgba(255,255,255,0.45);}
.accordion-item.active {border-color:var(--amber);box-shadow:0 0 25px rgba(255,107,0,0.15);}
.accordion-item.active .accordion-header {color:var(--amber);}
.accordion-item.active .accordion-header i {transform:rotate(180deg);color:var(--amber);text-shadow:0 0 15px rgba(255,107,0,0.8);}
.accordion-content {max-height:0;overflow:hidden;transition:max-height 0.3s ease-out,padding 0.3s;background:rgba(0,0,0,0.3);color:var(--text-muted);font-size:1rem;line-height:1.6;}
.accordion-item.active .accordion-content {max-height:500px;padding:20px;border-top:1px solid rgba(255,107,0,0.2);}
#paginationBar {display: none;align-items: center;justify-content: center;gap: 16px;padding: 48px 20px 24px;}
.pg-btn {display: inline-flex;align-items: center;gap: 10px;padding: 13px 32px;background: linear-gradient(135deg,rgba(255,107,0,0.12),rgba(255,107,0,0.06));border: 1px solid rgba(255,107,0,0.55);color: var(--amber);font-family: var(--font-head);font-size: 0.75rem;font-weight: 900;letter-spacing: 2.5px;text-transform: uppercase;border-radius: 8px;cursor: pointer;transition: all 0.25s ease;min-width: 130px;justify-content: center;position: relative;overflow: hidden;}
.pg-btn::before {content: '';position: absolute;inset: 0;background: linear-gradient(135deg,rgba(255,107,0,0),rgba(255,107,0,0.18));opacity: 0;transition: opacity 0.25s;}
.pg-btn:hover:not(:disabled)::before {opacity: 1;}
.pg-btn:hover:not(:disabled) {box-shadow: 0 0 28px rgba(255,107,0,0.45),0 4px 16px rgba(0,0,0,0.4);transform: translateY(-2px);border-color: var(--amber);}
.pg-btn:active:not(:disabled) {transform: translateY(0) scale(0.97);}
.pg-btn:disabled {opacity: 0.2;cursor: not-allowed;border-color: rgba(255,255,255,0.08);color: rgba(255,255,255,0.25);background: transparent;}
.pg-info {font-family: var(--font-head);font-size: 0.78rem;color: rgba(255,255,255,0.45);letter-spacing: 4px;padding: 12px 22px;border: 1px solid rgba(255,255,255,0.07);border-radius: 8px;background: rgba(255,255,255,0.02);min-width: 130px;text-align: center;}
@media (max-width: 500px) {.pg-btn {min-width: 52px;padding: 13px 14px;border-radius: 50%;}
.pg-label {display: none;}
.pg-info {min-width: 70px;font-size: 0.65rem;letter-spacing: 2px;padding: 10px 12px;}
#paginationBar {gap: 10px;padding: 36px 12px 16px;}}
footer {padding:30px;text-align:center;color:#444;font-size:0.8rem;margin-top:auto;}
.vault-picker {display:none;position:fixed;inset:0;background:rgba(0,0,0,0.86);backdrop-filter:blur(14px);z-index:2200;align-items:center;justify-content:center;padding:20px;}
.vault-picker.active {display:flex;}
.vault-picker-panel {background:#111111;border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:28px;width:100%;max-width:480px;box-shadow:0 0 60px rgba(255,255,255,0.07),0 30px 80px rgba(0,0,0,0.85);animation:modalPopEnhance 0.35s ease;}
.vault-picker-head {display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px;}
.vault-picker-head h3 {font-family:var(--font-head);color:#fff;text-transform:uppercase;letter-spacing:3px;}
.vault-picker-head p {color:var(--text-muted);font-size:0.85rem;margin-top:4px;}
.vault-picker-close {background:transparent;border:1px solid rgba(255,255,255,0.2);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;transition:0.3s;font-size:1.2rem;}
.vault-picker-close:hover {background:#fff;color:#000;}
.vault-game-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.vault-choice {background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.35s ease;}
.vault-choice:hover {transform:translateY(-4px);border-color:rgba(255,255,255,0.38);box-shadow:0 0 22px rgba(255,255,255,0.1);}
.vault-choice img {width:100%;height:120px;object-fit:cover;display:block;}
.vault-choice span {display:block;padding:12px;color:#fff;font-family:var(--font-head);font-size:0.9rem;}
.reveal {opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease;will-change:opacity,transform;}
.reveal.visible {opacity:1;transform:translateY(0);}
@keyframes vaultBreath {0%,100%{filter:drop-shadow(0 0 7px rgba(255,107,0,0.4));transform:scale(1);} 50%{filter:drop-shadow(0 0 22px rgba(255,107,0,0.75));transform:scale(1.05);}}
@keyframes vaultSpin {0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
@keyframes vaultBurst {0%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 6px rgba(255,107,0,0.5));} 30%{transform:scale(1.28) rotate(-18deg);filter:drop-shadow(0 0 40px rgba(255,107,0,1));} 65%{transform:scale(0.9) rotate(9deg);filter:drop-shadow(0 0 14px rgba(255,107,0,0.6));} 100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 8px rgba(255,107,0,0.4));}}
@keyframes ambientShift {0%{transform:translate3d(-1%,-1%,0) scale(1);opacity:0.7;} 100%{transform:translate3d(1%,1%,0) scale(1.05);opacity:1;}}
@keyframes fadeIn {from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);}}
#packOverlay {position:fixed;inset:0;background:rgba(0,0,0,0.97);backdrop-filter:blur(25px);z-index:3000;display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px;}
#packOverlay.active {display:flex;animation:packFadeIn 0.5s ease;}
@keyframes packFadeIn {from{opacity:0;transform:scale(0.95);} to{opacity:1;transform:scale(1);}}
.pack-header {text-align:center;margin-bottom:36px;}
.pack-header h2 {font-family:var(--font-head);font-size:clamp(1rem,4vw,1.4rem);text-transform:uppercase;letter-spacing:6px;color:#fff;text-shadow:0 0 30px rgba(255,107,0,0.9),0 0 60px rgba(255,107,0,0.4);animation:packTitlePulse 1.5s ease-in-out infinite alternate;}
@keyframes packTitlePulse {0%{text-shadow:0 0 20px rgba(255,107,0,0.7);} 100%{text-shadow:0 0 50px rgba(255,107,0,1),0 0 80px rgba(255,107,0,0.5);}}
.pack-header p {color:var(--text-muted);font-size:0.85rem;letter-spacing:3px;margin-top:8px;font-family:var(--font-head);}
.pack-cards-row {display:flex;gap:clamp(8px,2vw,18px);perspective:1400px;align-items:center;justify-content:center;flex-wrap:wrap;}
.pack-card {width:clamp(100px,14vw,145px);height:clamp(145px,20vw,210px);position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform 0.85s cubic-bezier(0.175,0.885,0.32,1.275);transform:translateY(60px) rotateY(0deg);opacity:0;animation:packCardDeal 0.5s ease forwards;}
.pack-card.revealed {transform:rotateY(180deg) !important;}
.pack-card:hover:not(.revealed) {transform:translateY(-6px) rotateY(8deg) !important;filter:drop-shadow(0 8px 20px rgba(255,107,0,0.5));}
@keyframes packCardDeal {0% {transform:translateY(80px) scale(0.8);opacity:0;}
100% {transform:translateY(0) scale(1);opacity:1;}}
.pack-card-face,.pack-card-back {position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;}
.pack-card-face {background:linear-gradient(145deg,#1e1a12,#110e00);border:2px solid var(--amber);box-shadow:0 0 25px rgba(255,107,0,0.45),inset 0 0 30px rgba(255,107,0,0.08);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;}
.pack-card-face svg {width:52px;height:52px;opacity:0.9;}
.pack-card-face .face-label {font-family:var(--font-head);font-size:0.55rem;letter-spacing:3px;color:var(--amber);text-transform:uppercase;opacity:0.8;}
.pack-card-back {transform:rotateY(180deg);border:2px solid var(--amber);box-shadow:0 0 30px rgba(255,107,0,0.5);display:flex;flex-direction:column;}
.pack-card-back img {width:100%;height:65%;object-fit:cover;flex-shrink:0;transition:transform 0.4s;}
.pack-card-back:hover img {transform:scale(1.05);}
.pack-card-back .pack-game-name {flex:1;display:flex;align-items:center;justify-content:center;padding:6px 8px;text-align:center;font-family:var(--font-head);font-size:0.58rem;color:#C8CEE0;background:linear-gradient(to top,#0a0600,#111);line-height:1.3;}
.pack-actions {display:flex;gap:14px;margin-top:30px;align-items:center;}
.pack-skip-btn {padding:10px 28px;background:transparent;border:1px solid rgba(255,255,255,0.18);color:var(--text-muted);font-family:var(--font-head);font-size:0.72rem;letter-spacing:2px;cursor:pointer;border-radius:24px;transition:0.3s;text-transform:uppercase;}
.pack-skip-btn:hover {border-color:#fff;color:#fff;}
.pack-reveal-all-btn {padding:10px 28px;background:var(--amber);color:#000;border:none;font-family:var(--font-head);font-size:0.72rem;letter-spacing:2px;cursor:pointer;border-radius:24px;transition:0.3s;text-transform:uppercase;box-shadow:0 0 18px rgba(255,107,0,0.5);}
.pack-reveal-all-btn:hover {box-shadow:0 0 35px rgba(255,107,0,0.9);transform:scale(1.04);}
.pack-hint {color:var(--text-muted);font-size:0.72rem;letter-spacing:2px;margin-top:14px;font-family:var(--font-head);opacity:0;transition:opacity 0.5s;}
.pack-hint.visible {opacity:1;}
@media (max-width:600px) {.main-container {padding:20px 10px 60px;}
.games-grid {grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.game-card {min-height:220px;}
.card-img-container {height:100px !important;}
.card-content {padding:10px;}
.game-title {font-size:0.9rem;}
.play-btn {padding:6px;font-size:0.7rem;}
.section-header {margin-bottom:15px;}
.section-title {font-size:1.2rem;}
.brand-word {font-size:1rem;}
header {padding:10px 15px;}
.hero {min-height:400px;height:50vh;}
.hero p {font-size:0.9rem;}
.hud-panel {padding:15px;gap:15px;}
.search-input {padding:12px 12px 12px 40px;font-size:1rem;}
.search-box i {left:12px;font-size:1rem;}
.cat-btn {padding:8px 16px;font-size:0.75rem;min-height:44px;}
.steps-container {gap:8px;}
.step-card {padding:12px 6px;}}
#vaultShootOverlay {display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,0);align-items:center;justify-content:center;transition:background 0.4s;}
#vaultShootOverlay.active {display:flex;background:rgba(0,0,0,0.88);}
#vaultShootOverlay.active.bg-ready {background:rgba(0,0,0,0.92);backdrop-filter:blur(12px);}
#shootCard {width:clamp(200px,38vw,320px);height:clamp(280px,52vw,450px);position:relative;transform-style:preserve-3d;cursor:pointer;border-radius:18px;transform:scale(0) rotateY(0deg) rotateZ(-20deg);transition:none;}
#shootCard.shooting {animation:cardShoot 0.7s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
@keyframes cardShoot {0% {transform:scale(0.1) rotateY(0deg) rotateZ(-20deg);opacity:0;}
60% {transform:scale(1.08) rotateY(0deg) rotateZ(3deg);opacity:1;}
100% {transform:scale(1) rotateY(0deg) rotateZ(0deg);opacity:1;}}
#shootCard.flipping {animation:cardFlip 0.9s cubic-bezier(0.4,0,0.2,1) forwards;}
@keyframes cardFlip {0% {transform:scale(1) rotateY(0deg);}
50% {transform:scale(1.06) rotateY(90deg);}
100% {transform:scale(1) rotateY(180deg);}}
#shootCard.flipped {transform:rotateY(180deg);}
#shootCard.pulse {animation:cardPulse 0.6s ease-in-out 2;}
@keyframes cardPulse {0%,100% {box-shadow:0 0 0 rgba(255,107,0,0);}
50% {box-shadow:0 0 50px rgba(255,107,0,0.6);}}
.shoot-face,.shoot-back {position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;}
.shoot-face {background:linear-gradient(145deg,#1e1a12,#110e00);border:2px solid var(--amber);box-shadow:0 0 40px rgba(255,107,0,0.5),inset 0 0 40px rgba(255,107,0,0.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.shoot-face-label {font-family:var(--font-head);font-size:0.62rem;letter-spacing:4px;color:var(--amber);text-transform:uppercase;opacity:0.85;}
.shoot-back {transform:rotateY(180deg);border:2px solid var(--amber);box-shadow:0 0 50px rgba(255,107,0,0.6);display:flex;flex-direction:column;background:#0a0600;}
.shoot-back img {width:100%;flex:1;object-fit:cover;}
.shoot-game-name {padding:14px 12px 4px;font-family:var(--font-head);font-size:0.75rem;letter-spacing:1px;color:#C8CEE0;text-align:center;line-height:1.3;}
.shoot-game-sub {padding:4px 12px 14px;font-family:var(--font-head);font-size:0.55rem;letter-spacing:3px;color:var(--amber);text-align:center;animation:shootSubBlink 1s ease-in-out infinite;}
@keyframes shootSubBlink {0%,100%{opacity:0.5;} 50%{opacity:1;}}
.shoot-overlay-close {position:fixed;top:20px;right:24px;color:rgba(255,255,255,0.4);font-size:1.6rem;cursor:pointer;transition:0.2s;z-index:3001;font-weight:300;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,0.12);}
.shoot-overlay-close:hover {color:#fff;border-color:rgba(255,255,255,0.4);}
@media (min-width:768px) {.hud-panel {flex-direction:row;align-items:center;}
.search-box {flex:1;}
.hero h1 {font-size:4rem;}}