.main-menu-overlay{position:absolute;top:0;left:0;width:1024px;height:768px;z-index:5000;display:flex;justify-content:center;align-items:center;font-family:"Press Start 2P",monospace;overflow:hidden;background-color:#ff7e5f}.sky-gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#1d1135,#4c1a57,#9d316e 60%,#eb656f 85%,#fad479);z-index:1}.clouds-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.layer-1{animation:panLayers 90s linear infinite;opacity:.8}.layer-2{animation:panLayersScaled 150s linear infinite;opacity:.4}.pixel-cloud{position:absolute;width:20px;height:20px;background-color:#fff;box-shadow:20px 0 #fff,40px 0 #fff,60px 0 #fff,80px 0 #fff,100px 0 #fff,0 -20px #fff,20px -20px #fff,40px -20px #fff,60px -20px #fff,20px -40px #fff,40px -40px #fff,20px 20px #fff,40px 20px #fff,60px 20px #fff}.c1{top:10%;left:-150px}.c2{top:25%;left:400px}.c3{top:8%;left:900px}.c4{top:35%;left:200px}.c5{top:15%;left:1100px}.skyline-layer{position:absolute;bottom:0;left:0;width:200%;height:350px;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.back-city{z-index:4;background-image:linear-gradient(to top,#32164a,#32164a),linear-gradient(to right,transparent 0px,transparent 20px,#32164a 20px,#32164a 60px,transparent 60px,transparent 100px,#32164a 100px,#32164a 130px,transparent 130px,transparent 150px,#32164a 150px,#32164a 200px,transparent 200px,transparent 240px,#32164a 240px,#32164a 280px,transparent 280px,transparent 310px,#32164a 310px,#32164a 350px);background-size:100% 100px,350px 200px;background-position:bottom left,bottom left;background-repeat:repeat-x;animation:panLayers 60s linear infinite;opacity:.8}.front-city{z-index:5;height:250px;background-image:linear-gradient(to top,#140822,#140822),linear-gradient(to right,#140822 0px,#140822 40px,transparent 40px,transparent 80px,#140822 80px,#140822 100px,transparent 100px,transparent 150px,#140822 150px,#140822 220px,transparent 220px,transparent 250px,#140822 250px,#140822 290px,transparent 290px,transparent 320px);background-size:100% 50px,320px 150px;background-position:bottom left,bottom left;background-repeat:repeat-x;animation:panLayers 30s linear infinite}.floor-grid-perspective{position:absolute;bottom:-150px;left:0;width:100%;height:300px;z-index:6;background-image:linear-gradient(rgba(245,126,219,.4) 2px,transparent 2px),linear-gradient(90deg,rgba(245,126,219,.4) 2px,transparent 2px);background-size:40px 40px;background-position:0 0;transform-origin:center top;transform:perspective(300px) rotateX(70deg);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 60%);mask-image:linear-gradient(to bottom,transparent 0%,black 60%)}@keyframes panLayersScaled{0%{transform:scale(.6) translateZ(0)}to{transform:scale(.6) translate3d(-50%,0,0)}}@keyframes panLayers{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}.main-menu-vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.6) 100%);z-index:10;pointer-events:none}.main-menu-container{position:relative;z-index:20;background-color:#2b5b84e6;border:4px solid #ffffff;box-shadow:inset -4px -4px #0006,inset 4px 4px #fff6,10px 10px #000c;padding:40px;text-align:center;color:#fff;width:600px}.main-menu-title{font-size:32px;margin-bottom:24px;text-shadow:4px 4px 0px #000;line-height:1.5;color:#fff;letter-spacing:2px}.main-menu-subtitle{font-size:14px;color:#e0e0e0;margin-bottom:50px;line-height:1.5;text-shadow:2px 2px 0px #000}.main-menu-play-btn{background-color:#e2b424;border:4px solid #000;color:#000;padding:20px 40px;font-size:20px;font-family:inherit;cursor:pointer;box-shadow:inset -4px -4px #0003,inset 4px 4px #fff6;transition:transform .1s,box-shadow .1s,background-color .1s;text-shadow:1px 1px 0px #fff}.main-menu-play-btn:hover{background-color:#f7ca40}.main-menu-play-btn:active{transform:translate(2px,2px);box-shadow:inset 4px 4px #0003,inset -4px -4px #fff6}.main-menu-info{font-size:10px;color:#a0c4e4;margin-top:40px;text-shadow:1px 1px 0px #000}.main-menu-play-btn.loading{background-color:#888;cursor:not-allowed;animation:btnPulse 1.5s ease-in-out infinite}.main-menu-play-btn.loading:hover{background-color:#888}@keyframes btnPulse{0%,to{opacity:.6}50%{opacity:1}}.character-selection-container{display:flex;flex-direction:column;align-items:center;gap:30px;margin-top:20px;position:relative}.selection-back-btn{position:absolute;top:-20px;left:-20px;background:#e2b424;border:4px solid #000;color:#000;padding:8px 12px;font-size:10px;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:4px;box-shadow:inset -3px -3px #0003,inset 3px 3px #fff6;z-index:100}.selection-back-btn:hover{background:#f7ca40}.selection-back-btn:active{transform:translate(2px,2px);box-shadow:inset 3px 3px #0003}.selection-title{font-size:24px;color:#fff;text-shadow:3px 3px 0px #000;margin-bottom:20px;letter-spacing:2px}.character-carousel{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:400px;background-color:#0006;border:4px solid #fff;padding:20px;box-shadow:inset 4px 4px #0009}.carousel-arrow{background:#e2b424;border:4px solid #000;color:#000;font-size:24px;font-family:inherit;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;box-shadow:inset -3px -3px #0003,inset 3px 3px #fff6}.carousel-arrow:hover{background:#f7ca40}.carousel-arrow:active{transform:translate(2px,2px);box-shadow:inset 3px 3px #0003}.character-preview-box{display:flex;flex-direction:column;align-items:center;gap:15px}.character-preview-img{height:120px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;animation:characterBounce 2s infinite ease-in-out;filter:drop-shadow(4px 4px 0px rgba(0,0,0,.8));transform:translateZ(0)}@keyframes characterBounce{0%,to{transform:translateY(0) translateZ(0)}50%{transform:translateY(-4px) translateZ(0)}}.character-name{font-size:16px;color:#e2b424;text-shadow:2px 2px 0px #000;line-height:1.4;padding:2px 0;display:block;transform:translateZ(0);text-rendering:optimizeLegibility}.continue-btn{margin-top:20px}
