@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap";body{font-family:Orbitron,sans-serif;overflow:hidden;background-color:#0a0a20;touch-action:none}#gameCanvas{position:absolute;top:0;left:0;z-index:10}#gameContainer{position:relative;width:100vw;height:100vh;overflow:hidden}.parallax-layer{position:absolute;width:200%;height:100%;background-repeat:repeat-x;will-change:transform;transform-origin:0 0;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:parallax-move infinite linear}@keyframes parallax-move{0%{transform:translateY(-50%)}to{transform:translateY(0)}}#bgLayer1{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1000" viewBox="0 0 2000 1000"><g fill="white"><circle cx="100" cy="150" r="2"/><circle cx="300" cy="400" r="1"/><circle cx="500" cy="100" r="1"/><circle cx="700" cy="300" r="2"/><circle cx="900" cy="50" r="1"/><circle cx="1100" cy="350" r="2"/><circle cx="1300" cy="200" r="1"/><circle cx="1500" cy="450" r="2"/><circle cx="1700" cy="80" r="1"/><circle cx="1900" cy="320" r="2"/></g></svg>');z-index:1;animation-duration:20s}#bgLayer2{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1000" viewBox="0 0 2000 1000"><g fill="%23aaa" opacity="0.5"><circle cx="50" cy="250" r="2"/><circle cx="250" cy="500" r="1"/><circle cx="450" cy="200" r="1"/><circle cx="650" cy="400" r="2"/><circle cx="850" cy="150" r="1"/><circle cx="1050" cy="450" r="2"/><circle cx="1250" cy="300" r="1"/><circle cx="1450" cy="550" r="2"/><circle cx="1650" cy="180" r="1"/><circle cx="1850" cy="420" r="2"/></g></svg>');z-index:2;animation-duration:15s}#bgLayer3{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1000" viewBox="0 0 2000 1000"><g fill="%23555" opacity="0.3"><circle cx="150" cy="350" r="3"/><circle cx="350" cy="600" r="2"/><circle cx="550" cy="300" r="2"/><circle cx="750" cy="500" r="3"/><circle cx="950" cy="250" r="2"/><circle cx="1150" cy="550" r="3"/><circle cx="1350" cy="400" r="2"/><circle cx="1550" cy="650" r="3"/><circle cx="1750" cy="280" r="2"/><circle cx="1950" cy="520" r="3"/></g></svg>');z-index:3;animation-duration:10s}.explosion{position:absolute;width:64px;height:64px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="yellow"/><circle cx="32" cy="32" r="24" fill="orange"/><circle cx="32" cy="32" r="16" fill="red"/></svg>');background-size:contain;animation:explode .5s steps(8) forwards}@keyframes explode{0%{transform:scale(.1);opacity:1}to{transform:scale(1.5);opacity:0}}.damage-number{position:absolute;color:#f44;font-weight:900;font-size:24px;pointer-events:none;z-index:50;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;filter:drop-shadow(0 0 5px rgba(255,0,0,.5));animation:floatUp .8s ease-out forwards;will-change:transform,opacity}@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-40px) scale(1.2);opacity:0}}@keyframes fadeUp{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}20%{transform:translate(-50%,-50%) scale(1.2);opacity:1}80%{transform:translate(-50%,-150%) scale(1);opacity:1}to{transform:translate(-50%,-200%) scale(1);opacity:0}}.upgrade-notification{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);color:#00f3ff;font-family:Orbitron,sans-serif;font-size:24px;font-weight:900;text-align:center;text-shadow:0 0 10px #00f3ff,0 0 20px #00f3ff;z-index:100;pointer-events:none;letter-spacing:2px;width:100%}#loadingScreen{background-color:#0a0a20}#loadingScreen h1{text-shadow:0 0 10px rgba(66,153,225,.6);animation:pulse-text 2s infinite}#loadingProgress{box-shadow:0 0 15px #4299e166;transition:width .3s ease-out}@keyframes pulse-text{0%{opacity:.6;transform:scale(.98)}50%{opacity:1;transform:scale(1)}to{opacity:.6;transform:scale(.98)}}.laser{position:absolute;width:8px;height:24px;background:orange;border-radius:2px;box-shadow:0 0 8px orange}.enemy-laser{background:red;box-shadow:0 0 8px red}.powerup{position:absolute;width:32px;height:32px;background-image:url(assets/PixelSpaceRage/128px/Powerup_Rockets_png_processed.png);background-size:contain;animation:pulse 1s infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.2)}}#mobileControls{position:fixed;bottom:20px;width:100%;display:none;justify-content:space-between;padding:0 20px;z-index:100}.mobile-btn{width:60px;height:60px;background-color:#0066ff4d;border:2px solid #0066ff;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:24px;user-select:none;-webkit-user-select:none;touch-action:manipulation}.mobile-btn:active{background-color:#06f9}@media (max-width: 768px){#mobileControls{display:flex}}.glass-panel{background:rgba(10,10,32,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,243,255,.1);box-shadow:0 0 20px #00000080,inset 0 0 20px #0003;border-radius:16px;padding:3rem;position:relative;overflow:hidden}.glass-panel:before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:skew(-25deg);animation:shine 8s infinite}@keyframes shine{0%{left:-100%}20%{left:200%}to{left:200%}}.neon-text{color:#fff;text-shadow:0 0 5px #00f3ff,0 0 10px #00f3ff,0 0 20px #00f3ff}.neon-text-purple{color:#fff;text-shadow:0 0 5px #bc13fe,0 0 10px #bc13fe,0 0 20px #bc13fe}.menu-button{position:relative;background:linear-gradient(45deg,rgba(0,243,255,.1),rgba(188,19,254,.1));border:1px solid rgba(0,243,255,.3);color:#fff;padding:12px 32px;font-family:Orbitron,sans-serif;font-size:1.2rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;overflow:hidden;transition:all .3s ease;-webkit-clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.menu-button:hover{background:linear-gradient(45deg,rgba(0,243,255,.2),rgba(188,19,254,.2));border-color:#00f3ff;box-shadow:0 0 10px #00f3ff4d,inset 0 0 10px #00f3ff33;transform:translateY(-2px);text-shadow:0 0 8px rgba(255,255,255,.8)}.menu-button:active{transform:translateY(0)}.menu-button:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#00f3ff,#bc13fe);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}.menu-button:hover:after{transform:scaleX(1);transform-origin:left}.title-container{perspective:1000px;margin-bottom:3rem;text-align:center}.main-title{font-size:5rem;font-weight:900;letter-spacing:10px;background:linear-gradient(to bottom,#fff,#aaddff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 15px rgba(0,243,255,.5));animation:floating 4s ease-in-out infinite}.subtitle{font-size:1.2rem;letter-spacing:8px;color:#bc13fe;text-transform:uppercase;margin-top:-10px;opacity:.8}@keyframes floating{0%,to{transform:translateY(0) rotateX(0)}50%{transform:translateY(-10px) rotateX(5deg)}}.modal-content{background:rgba(10,10,20,.95);border:1px solid #bc13fe;box-shadow:0 0 30px #bc13fe33;border-radius:8px;padding:2rem;max-width:500px;width:90%;margin:15% auto;position:relative;color:#fff}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100}.key-badge{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:2px 8px;border-radius:4px;font-family:monospace;color:#00f3ff;margin-right:8px}
