body.vector-mode nav, body.vector-mode header, body.vector-mode main, body.vector-mode footer, body.vector-mode #space-layer { filter: grayscale(100%) sepia(100%) hue-rotate(75deg) saturate(500%) brightness(1.2) contrast(1.5); }
.secret-code { display: none; color: #00ff00; font-size: 1.1rem; font-weight: bold; margin-top: 8px; text-shadow: 0 0 10px #00ff00; font-family: 'Courier New', Courier, monospace; }
body.vector-mode .secret-code { display: block; animation: textJitter 0.1s infinite; }
.faq-secret { transition: color 0.3s; }
body.vector-mode .faq-secret { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; font-weight: 900; font-size: 1.2rem; text-transform: uppercase; }
.free-play-mode { filter: drop-shadow(0 0 20px #ffd700) brightness(1.5) !important; }
.moon-ship { position: absolute; top: 45%; left: -20px; width: 10px; height: 4px; background: #05050a; box-shadow: 0 -2px 0 #05050a, 0 2px 0 #05050a; opacity: 0; }
.moon-flyby .moon-ship { animation: flybyAnim 3s linear forwards; }
@keyframes flybyAnim { 0% { left: -20px; opacity: 1; } 100% { left: 50px; opacity: 1; } }
.kill-screen #typing-text { color: #ff00ff; text-shadow: 2px 2px 0px #00ffff, -2px -2px 0px #ff0000; font-weight: bold; animation: textJitter 0.1s infinite; }
.kill-screen .grid-background { animation: gridGlitch 0.2s infinite; filter: hue-rotate(90deg); }
@keyframes textJitter { 0% { transform: translate(0) } 20% { transform: translate(-3px, 2px) } 40% { transform: translate(-1px, -3px) } 60% { transform: translate(3px, 1px) } 80% { transform: translate(1px, -2px) } 100% { transform: translate(0) } }
@keyframes gridGlitch { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 50% { transform: perspective(500px) rotateX(60deg) translateY(20px); } 100% { transform: perspective(500px) rotateX(60deg) translateY(-20px); } }
#terminal-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; opacity: 0; pointer-events: none; user-select: none; }
#vector-terminal { background: transparent; border: none; color: transparent; outline: none; width: 250px; font-family: 'Courier New', Courier, monospace; font-weight: bold; text-transform: uppercase; }
body.vector-mode #terminal-container { opacity: 1; pointer-events: auto; }
body.vector-mode #vector-terminal { border-bottom: 2px solid #00ff00; color: #00ff00; background: rgba(0,0,0,0.8); padding: 5px; box-shadow: 0 5px 15px rgba(0,255,0,0.2); }
#morse-star { position: absolute; top: calc(50% + 42px); left: calc(65% + 49px); z-index: -1; animation: none !important; }
.hidden-planet { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 2s ease-in; z-index: -2; }
.planet-glitch { top: 10%; left: 10%; width: 70px; height: 70px; background: radial-gradient(circle at 30% 30%, #ff00ff, #330033); box-shadow: 0 0 25px rgba(255,0,255,0.5), inset -10px -10px 20px rgba(0,0,0,0.8); }
.planet-supra { top: 70%; left: 15%; width: 85px; height: 85px; background: radial-gradient(circle at 30% 30%, #ff4500, #441100); box-shadow: 0 0 35px rgba(255,69,0,0.5), inset -10px -10px 20px rgba(0,0,0,0.8); }
.planet-doom { top: 60%; left: 20%; width: 80px; height: 80px; background: radial-gradient(circle at 30% 30%, #ff3300, #330000); box-shadow: 0 0 30px rgba(255,51,0,0.5), inset -10px -10px 20px rgba(0,0,0,0.8); }
.planet-tmnt { top: 20%; left: 25%; width: 90px; height: 90px; background: radial-gradient(circle at 30% 30%, #00ff00, #003300); box-shadow: 0 0 30px rgba(0,255,0,0.5), inset -10px -10px 20px rgba(0,0,0,0.8); }
.planet-tron { top: 80%; left: 35%; width: 120px; height: 120px; background: radial-gradient(circle at 30% 30%, #00ffff, #000033); box-shadow: 0 0 40px rgba(0,255,255,0.5), inset -10px -10px 20px rgba(0,0,0,0.8); }
.planet-zebes { top: 25%; left: 45%; width: 150px; height: 150px; background: radial-gradient(circle at 30% 30%, #00ffcc, #003322); box-shadow: 0 0 50px rgba(0,255,204,0.4), inset -20px -20px 40px rgba(0,0,0,0.8); }
.planet-bfg { top: 10%; left: 55%; width: 60px; height: 60px; background: radial-gradient(circle at 30% 30%, #39ff14, #003300); box-shadow: 0 0 20px rgba(57,255,20,0.6), inset -5px -5px 15px rgba(0,0,0,0.8); }
.planet-cyber { top: 50%; left: 65%; width: 100px; height: 100px; background: radial-gradient(circle at 30% 30%, #ffff00, #333300); box-shadow: 0 0 35px rgba(255,255,0,0.4), inset -15px -15px 30px rgba(0,0,0,0.8); z-index: 0; }
.planet-shadaloo { top: 40%; left: 70%; width: 90px; height: 90px; background: radial-gradient(circle at 30% 30%, #a200ff, #220033); box-shadow: 0 0 40px rgba(162,0,255,0.4), inset -20px -20px 40px rgba(0,0,0,0.8); }
.planet-freeplay { top: 80%; left: 80%; width: 110px; height: 110px; background: radial-gradient(circle at 30% 30%, #ffd700, #554400); box-shadow: 0 0 45px rgba(255,215,0,0.4), inset -15px -15px 30px rgba(0,0,0,0.8); }
.planet-pacman { top: 60%; left: 88%; width: 80px; height: 80px; background: radial-gradient(circle at 30% 30%, #ff8c00, #331100); box-shadow: 0 0 30px rgba(255,140,0,0.5), inset -10px -10px 20px rgba(0,0,0,0.8); }
.planet-unlocked { opacity: 1; }
.arg-hitbox { position: fixed; border-radius: 50%; cursor: crosshair; z-index: 100; pointer-events: none; }
.hitbox-unlocked { pointer-events: auto; }
#hitbox-glitch { top: 10%; left: 10%; width: 70px; height: 70px; }
#hitbox-supra { top: 70%; left: 15%; width: 85px; height: 85px; }
#hitbox-doom { top: 60%; left: 20%; width: 80px; height: 80px; }
#hitbox-tmnt { top: 20%; left: 25%; width: 90px; height: 90px; }
#hitbox-tron { top: 80%; left: 35%; width: 120px; height: 120px; }
#hitbox-zebes { top: 25%; left: 45%; width: 150px; height: 150px; }
#hitbox-bfg { top: 10%; left: 55%; width: 60px; height: 60px; }
#hitbox-cyber { top: 50%; left: 65%; width: 100px; height: 100px; }
#hitbox-shadaloo { top: 40%; left: 70%; width: 90px; height: 90px; }
#hitbox-freeplay { top: 80%; left: 80%; width: 110px; height: 110px; }
#hitbox-pacman { top: 60%; left: 88%; width: 80px; height: 80px; }
.anim-pulse { animation: pPulse 1s ease-in-out 3; }
.anim-spin { animation: pSpin 1s linear 2; }
.anim-bounce { animation: pBounce 1s ease-in-out 3; }
.anim-glitch { animation: pGlitch 0.2s infinite; }
@keyframes pPulse { 50% { transform: scale(1.3); } }
@keyframes pSpin { 100% { transform: rotate(360deg); } }
@keyframes pBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
@keyframes pGlitch { 0% { transform: translate(0) } 25% { transform: translate(-5px, 5px) } 50% { transform: translate(5px, -5px) } 75% { transform: translate(-5px, -5px) } 100% { transform: translate(0) } }
.doom-mode .price-banner { background: #ff0000; box-shadow: 0 0 20px #ff0000; color: #05050a; }
.doom-mode .card h3, .doom-mode .section-title { color: #ff0000; border-bottom-color: #ff0000; }
.doom-mode .card:hover, .doom-mode .game-category { border-color: #ff0000; }
.doom-mode .game-item img { border-color: #ff0000; }
.doom-mode .game-item:hover img { border-color: #ffaa00; }
.doom-mode .game-item span { color: #ffaa00; }
.doom-mode footer { border-color: #ff0000; color: #ff5555; }
.doom-mode .grid-background { background-image: linear-gradient(rgba(255,0,0,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,0,0.4) 1px, transparent 1px); }
.doom-mode .planet { background: radial-gradient(circle at 30% 30%, #ff0000, #330000); box-shadow: 0 0 40px rgba(255,0,0,0.4), inset -20px -20px 40px rgba(0,0,0,0.8); }
.doom-mode .planet::after { border-color: rgba(255,100,0,0.4); border-top-color: transparent; border-left-color: transparent; }
.doom-mode .horizon-glow { background: linear-gradient(to top, rgba(255,0,0,0.2), transparent); }
.rainbow-mode .grid-background { animation: rainbowGrid 2s linear infinite; }
.rainbow-mode #typing-text { animation: rainbowText 1s linear infinite; }
@keyframes rainbowGrid { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes rainbowText { 0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; } 33% { color: #00ff00; text-shadow: 0 0 10px #00ff00; } 66% { color: #0000ff; text-shadow: 0 0 10px #0000ff; } 100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; } }
.paradise-mode .price-banner { background: #00e5ff; box-shadow: 0 0 20px #00e5ff; color: #05050a; }
.paradise-mode .card h3, .paradise-mode .section-title { color: #00e5ff; border-bottom-color: #00e5ff; }
.paradise-mode .card:hover, .paradise-mode .game-category { border-color: #00e5ff; }
.paradise-mode .game-item img { border-color: #00e5ff; }
.paradise-mode .game-item:hover img { border-color: #ff0000; }
.paradise-mode .game-item span { color: #ff0000; }
.paradise-mode footer { border-color: #00e5ff; color: #00aaff; }
.paradise-mode .grid-background { background-image: linear-gradient(rgba(0,229,255,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.4) 1px, transparent 1px); }
.paradise-mode .planet { background: radial-gradient(circle at 30% 30%, #00e5ff, #110022); box-shadow: 0 0 40px rgba(0,229,255,0.4), inset -20px -20px 40px rgba(0,0,0,0.8); }
.paradise-mode .planet::after { border-color: rgba(255,0,85,0.4); border-top-color: transparent; border-left-color: transparent; }
.paradise-mode .horizon-glow { background: linear-gradient(to top, rgba(0,229,255,0.2), transparent); }
#secret-car { position: fixed; bottom: 15%; left: -250px; width: 140px; height: 28px; background-color: #ff4500; border-radius: 8px 45px 5px 5px; box-shadow: 0 8px 15px rgba(0,255,0,0.7); z-index: 1000; pointer-events: none; opacity: 0; }
#secret-car::before { content: ''; position: absolute; top: -16px; left: 45px; width: 55px; height: 16px; background-color: #05050a; border: 2px solid #ff4500; border-bottom: none; border-radius: 30px 10px 0 0; }
.spoiler { position: absolute; top: -18px; left: 5px; width: 20px; height: 18px; border-right: 4px solid #ff4500; border-top: 4px solid #ff4500; border-radius: 0 4px 0 0; }
.wheels { position: absolute; bottom: -12px; left: 20px; width: 24px; height: 24px; background-color: #111; border: 2px solid #ccc; border-radius: 50%; box-shadow: 75px 0 0 0 #111, 75px 0 0 2px #ccc; }
@keyframes driveAcross { 0% { left: -250px; opacity: 1; } 80% { left: 110vw; opacity: 1; } 100% { left: 110vw; opacity: 0; } }
.paradise-mode #secret-car { animation: driveAcross 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#high-score-screen { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.95); border: 4px solid #00ff00; padding: 40px; text-align: center; z-index: 2000; display: none; box-shadow: 0 0 50px rgba(0,255,0,0.5); color: #00ff00; font-family: 'Courier New', Courier, monospace; }
#high-score-screen h3 { font-size: 2rem; margin-top: 0; text-shadow: 2px 2px 0px #ff00ff; letter-spacing: 4px; }
.initials-input { display: flex; justify-content: center; gap: 15px; margin: 30px 0; }
.initials-input input { width: 50px; height: 60px; background: transparent; border: none; border-bottom: 4px solid #00ff00; color: #fff; font-size: 3rem; text-align: center; font-family: 'Courier New', Courier, monospace; text-transform: uppercase; outline: none; }
.initials-input input:focus { border-bottom-color: #ff00ff; color: #ff00ff; }
#submit-score { background: #00ff00; color: #000; border: none; padding: 10px 20px; font-size: 1.2rem; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
#submit-score:hover { background: #ff00ff; color: #fff; }
#leaderboard-display { margin-top: 30px; font-size: 1.5rem; text-align: left; line-height: 1.8; }