:root{font-family:"Press Start 2P",system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#050011;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden}canvas{display:block}#startScreen{position:absolute;top:0;left:0;width:100vw;height:100vh;background:#050011;display:flex;justify-content:center;align-items:center;z-index:1000;overflow:hidden;perspective:1000px}.retro-bg{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;background:radial-gradient(circle at center,#1a0b2e,#000);overflow:hidden}.stars,.stars2,.stars3{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:starsAnim linear infinite}.stars{animation-duration:100s;opacity:.5;box-shadow:5vw 5vh #fff,15vw 25vh #fff,25vw 50vh #fff,35vw 75vh #fff,45vw 10vh #fff,55vw 30vh #fff,65vw 55vh #fff,75vw 80vh #fff,85vw 15vh #fff,95vw 40vh #fff,10vw 60vh #fff,20vw 85vh #fff,30vw 20vh #fff,40vw 45vh #fff,50vw 70vh #fff,60vw 95vh #fff,70vw 35vh #fff,80vw 60vh #fff,90vw 10vh #fff,5vw 90vh #fff,12vw 12vh #fff,22vw 22vh #fff,32vw 32vh #fff,42vw 42vh #fff}.stars2{width:3px;height:3px;animation-duration:150s;opacity:.4;box-shadow:8vw 8vh #fff,18vw 28vh #fff,28vw 58vh #fff,38vw 88vh #fff,48vw 18vh #fff,58vw 48vh #fff,68vw 78vh #fff,78vw 8vh #fff,88vw 38vh #fff,98vw 68vh #fff,18vw 98vh #fff,28vw 18vh #fff,38vw 48vh #fff,48vw 78vh #fff,58vw 8vh #fff,68vw 38vh #fff,25vw 15vh #fff,85vw 85vh #fff}.stars3{width:1px;height:1px;animation-duration:200s;opacity:.8;box-shadow:3vw 35vh #fff,13vw 55vh #fff,23vw 75vh #fff,33vw 95vh #fff,43vw 15vh #fff,53vw 35vh #fff,63vw 65vh #fff,73vw 85vh #fff,83vw 25vh #fff,93vw 45vh #fff,3vw 65vh #fff,13vw 95vh #fff,23vw 25vh #fff,33vw 45vh #fff,43vw 75vh #fff,53vw 5vh #fff,63vw 35vh #fff,73vw 55vh #fff,83vw 85vh #fff,93vw 15vh #fff,2vw 2vh #fff,98vw 98vh #fff,50vw 50vh #fff}.grid-floor{position:absolute;bottom:-30%;left:-50%;width:200%;height:100%;background-image:linear-gradient(#bd00ff 2px,transparent 2px),linear-gradient(90deg,#bd00ff 2px,transparent 2px);background-size:60px 60px;background-position:0 0;transform:perspective(400px) rotateX(60deg);animation:gridMove 15s linear infinite;mask-image:linear-gradient(to top,#000,#0000 90%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 90%);opacity:1;box-shadow:0 0 50px #bd00ff33}.login-panel{width:400px;padding:40px;background:#0a0a1eb3;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(0,242,255,.3);box-shadow:0 0 40px #00f2ff1a;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:30px;transform:translateY(0);animation:floatPanel 6s ease-in-out infinite;position:relative}.login-panel:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#ff00de,#00f2ff,#ff00de);z-index:-1;border-radius:14px;opacity:.5;filter:blur(10px)}.subtitle{font-family:Orbitron,sans-serif;color:#00f2ff;font-size:14px;letter-spacing:4px;margin-top:-20px;text-shadow:0 0 5px #00f2ff;opacity:.8}.neon-title{font-family:Orbitron,"Press Start 2P",sans-serif;font-size:56px;font-weight:700;color:#fff;text-transform:uppercase;margin:0;position:relative;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 20px #ff00de,0 0 40px #ff00de;animation:flickerTitle 3s infinite alternate}.neon-title:after{content:attr(data-text);position:absolute;top:0;left:3px;color:#00f2ffcc;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 45%,0 45%);animation:glitch 2.5s infinite linear alternate-reverse;mix-blend-mode:hard-light}.neon-title:before{content:attr(data-text);position:absolute;top:0;left:-3px;color:#ff00decc;overflow:hidden;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);animation:glitch 3s infinite linear alternate-reverse;mix-blend-mode:hard-light}.input-group{position:relative;width:100%}.input-group input{width:100%;padding:15px 10px;font-family:Orbitron,sans-serif;font-size:18px;background:#00000080;border:none;border-bottom:2px solid rgba(0,242,255,.3);color:#fff;outline:none;transition:all .3s ease;box-sizing:border-box;text-transform:uppercase;border-radius:4px 4px 0 0}.input-group label{position:absolute;top:15px;left:10px;font-family:Orbitron,sans-serif;font-size:14px;color:#00f2ff99;pointer-events:none;transition:all .3s ease}.input-group input:focus,.input-group input:not(:placeholder-shown){border-bottom:2px solid #00f2ff;background:#00f2ff0d}.input-group input:focus~label,.input-group input:not(:placeholder-shown)~label{top:-20px;left:0;font-size:12px;color:#00f2ff;text-shadow:0 0 5px #00f2ff}.input-group .bar{position:absolute;bottom:0;left:0;width:0;height:2px;background:#ff00de;transition:width .4s ease;box-shadow:0 0 10px #ff00de}.input-group input:focus~.bar{width:100%}#startButton{font-family:Orbitron,sans-serif;position:relative;padding:18px 50px;font-size:18px;font-weight:700;letter-spacing:2px;background:transparent;color:#00f2ff;border:none;cursor:pointer;overflow:hidden;transition:all .3s;z-index:1}#startButton:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid #00f2ff;transform:skew(-20deg);background:#00f2ff0d;z-index:-1;transition:all .3s}#startButton:hover:before{background:#00f2ff;box-shadow:0 0 20px #00f2ff,inset 0 0 10px #00f2ff}#startButton:hover{color:#000}.btn-glitch{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 5%,#ff00ff 5%,#ff00ff 10%,transparent 10%);opacity:0}#startButton:active{transform:scale(.95)}@keyframes gridMove{0%{background-position:0 0}to{background-position:0 50px}}@keyframes starsAnim{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes floatPanel{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}@keyframes flickerTitle{0%,19%,21%,23%,25%,54%,56%,to{opacity:1;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 20px #ff00de,0 0 40px #ff00de}20%,24%,55%{opacity:.5;text-shadow:none}}
