@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap";:root{--neon-cyan:#00e5ff;--neon-pink:#ff4fbf;--neon-yellow:#ffd35c;--bg-dark:#050510;--font-main:"Rajdhani", sans-serif;--font-retro:"Orbitron", sans-serif;--panel-bg:#0f172ab3}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:#fff;font-family:var(--font-main);background-image:radial-gradient(circle at 15%,#00e5ff14,#0000 50%),radial-gradient(circle at 85% 30%,#ff4fbf14,#0000 50%);justify-content:center;align-items:center;min-height:100vh;margin:0;display:flex;overflow:hidden}.grid-bg{transform-origin:bottom;z-index:-1;background-image:linear-gradient(#00e5ff33 1px,#0000 1px),linear-gradient(90deg,#00e5ff33 1px,#0000 1px);background-size:40px 40px;width:200%;height:100%;animation:10s linear infinite grid-move;position:absolute;bottom:0;left:-50%;transform:perspective(500px)rotateX(60deg);-webkit-mask-image:linear-gradient(#0000 40%,#000);mask-image:linear-gradient(#0000 40%,#000)}@keyframes grid-move{0%{transform:perspective(500px)rotateX(60deg)translateY(0)}to{transform:perspective(500px)rotateX(60deg)translateY(40px)}}#app{z-index:10;flex-direction:column;width:100%;max-width:900px;height:100vh;display:flex;position:relative}.screen{flex:1;width:100%;height:100%;padding:2rem;display:none}.screen.active{flex-direction:column;justify-content:center;display:flex}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #00e5ff4d;border-top:4px solid var(--neon-cyan);border-radius:20px;padding:2.5rem;box-shadow:0 0 40px #00e5ff26,inset 0 0 20px #00e5ff0d}.credit{text-align:center;font-family:var(--font-main);letter-spacing:1.5px;text-transform:uppercase;color:#cbd5e180;pointer-events:none;margin-top:1.2rem;font-size:.72rem}#config-screen.active{justify-content:flex-start;overflow-y:auto}#config-screen .glass-panel{margin-top:auto}#config-screen .credit{margin-bottom:auto}.retro-title{font-family:var(--font-retro);text-align:center;text-transform:uppercase;background:linear-gradient(to right, var(--neon-cyan), var(--neon-pink));-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px #ff4fbf66);-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.5rem;line-height:1.2}.subtitle{text-align:center;color:#cbd5e1;letter-spacing:2px;text-transform:uppercase;margin-bottom:1.4rem;font-size:1.2rem}.config-group{background:#0000004d;border:1px solid #ffffff0d;border-radius:12px;margin-bottom:1.3rem;padding:1.2rem}.config-group h3{font-family:var(--font-retro);color:var(--neon-cyan);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;font-size:1rem}.checkbox-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.75rem;display:grid}.checkbox-grid label,.radio-group label{cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:.5rem;padding:.6rem;font-size:1.1rem;transition:all .2s;display:flex}.checkbox-grid label:hover,.radio-group label:hover{border-color:var(--neon-cyan);background:#00e5ff1a;box-shadow:0 0 10px #00e5ff33}.checkbox-grid input[type=checkbox],.radio-group input[type=radio]{accent-color:var(--neon-cyan);cursor:pointer;width:1.2rem;height:1.2rem}.radio-group{gap:1rem;display:flex}.retro-btn{font-family:var(--font-retro);cursor:pointer;text-transform:uppercase;letter-spacing:2px;border:none;border-radius:12px;width:100%;padding:1.2rem;font-size:1.2rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.primary-btn{background:linear-gradient(135deg, var(--neon-cyan), #05f);color:#fff;border:2px solid var(--neon-cyan);margin-top:1rem;font-weight:900;box-shadow:0 0 20px #00e5ff80}.primary-btn:hover{transform:scale(1.02)translateY(-2px);box-shadow:0 0 30px #00e5ffcc}.primary-btn:active{transform:scale(.98)translateY(2px)}.secondary-btn{color:var(--neon-pink);border:1px solid var(--neon-pink);background:#0f172acc;box-shadow:0 0 10px #ff4fbf33}.secondary-btn:hover{background:#ff4fbf1a;box-shadow:0 0 20px #ff4fbf80}.game-hud{font-family:var(--font-retro);background:#00000080;border:1px solid #00e5ff4d;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:1rem;font-size:1.2rem;display:flex;box-shadow:inset 0 0 20px #00e5ff1a}.hud-item{color:var(--neon-cyan)}.hud-item span{color:#fff;text-shadow:0 0 10px var(--neon-cyan);font-size:1.4rem}.hud-item:nth-child(3){color:var(--neon-pink)}.hud-item:nth-child(3) span{text-shadow:0 0 10px var(--neon-pink)}.game-layout-row{flex:1;gap:2rem;min-height:0;display:flex}.game-area{background:linear-gradient(#050510e6,#0f172ae6);border:1px solid #ffffff1a;border-radius:16px;flex:1;justify-content:center;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 50px #000c}#space-scene{contain:layout paint style;background:radial-gradient(at 50% 120%,#003c6e73,#0000 60%),linear-gradient(#04010f,#0a0524 45%,#060a1c);border-radius:16px;position:absolute;inset:0;overflow:hidden}.nebula{z-index:0;background:radial-gradient(circle at 28% 22%,#ff4fbf24,#0000 45%),radial-gradient(circle at 72% 68%,#00e5ff24,#0000 45%),radial-gradient(circle at 60% 30%,#7c5cff1f,#0000 40%);animation:26s ease-in-out infinite alternate nebulaDrift;position:absolute;inset:-10%}@keyframes nebulaDrift{0%{transform:translate(0)scale(1)}to{transform:translate(2%,-3%)scale(1.08)}}.star-layer{z-index:1;will-change:transform;backface-visibility:hidden;background-repeat:repeat;height:200%;position:absolute;top:0;left:0;right:0}.star-far{opacity:.55;background-image:radial-gradient(1px 1px at 25px 35px,#ffffffb3,#0000),radial-gradient(1px 1px at 90px 120px,#fff9,#0000),radial-gradient(1px 1px at 160px 60px,#00e5ff99,#0000),radial-gradient(1px 1px at 130px 180px,#ffffff80,#0000),radial-gradient(1px 1px at 60px 205px,#ffffff80,#0000);background-size:200px 220px;animation:18s linear infinite scrollFar}@keyframes scrollFar{0%{transform:translateY(-220px)}to{transform:translate(0,0)}}.star-mid{opacity:.75;background-image:radial-gradient(1.6px 1.6px at 40px 50px,#fff,#0000),radial-gradient(1.6px 1.6px at 150px 90px,#ffd35ce6,#0000),radial-gradient(1.6px 1.6px at 220px 170px,#fff,#0000),radial-gradient(1.6px 1.6px at 80px 230px,#00e5ffe6,#0000);background-size:260px 280px;animation:10s linear infinite scrollMid}@keyframes scrollMid{0%{transform:translateY(-280px)}to{transform:translate(0,0)}}.star-near{opacity:.95;background-image:radial-gradient(2.2px 2.2px at 60px 80px,#fff,#0000),radial-gradient(2.2px 2.2px at 280px 140px,#ff4fbff2,#0000),radial-gradient(2px 2px at 180px 300px,#fff,#0000);background-size:320px 340px;animation:6s linear infinite scrollNear}@keyframes scrollNear{0%{transform:translateY(-340px)}to{transform:translate(0,0)}}.shooting-star{z-index:1;opacity:0;filter:drop-shadow(0 0 6px #bff7ff);pointer-events:none;will-change:transform, opacity;background:linear-gradient(90deg,#0000,#fff);border-radius:2px;width:110px;height:2px;position:absolute;top:0;left:0}#planet{transform-origin:50%;z-index:2;width:92px;height:92px;transition:transform .6s cubic-bezier(.34,1.2,.64,1);position:absolute;top:9%;left:50%;transform:translate(-50%)scale(.35)}.planet-glow{background:radial-gradient(circle,#00e5ff59,#0000 62%);border-radius:50%;animation:4.5s ease-in-out infinite planetPulse;position:absolute;inset:-38%}@keyframes planetPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}.planet-body{background:radial-gradient(circle at 32% 28%,#9af0ff,#18b3d6 36%,#1a3da8 72%,#08123a);border-radius:50%;position:absolute;inset:0;overflow:hidden;box-shadow:inset -10px -14px 34px #000000a6,0 0 28px #00e5ff73}.planet-body:after{content:"";opacity:.5;background:repeating-linear-gradient(115deg,#ffffff1f 0 8px,#0000 8px 22px),radial-gradient(circle at 70% 75%,#7c5cff80,#0000 55%);animation:14s linear infinite planetSwirl;position:absolute;inset:-20%}@keyframes planetSwirl{0%{transform:translate(0)}to{transform:translate(28%)}}.planet-ring{border:3px solid #ffd35c8c;border-radius:50%;width:175%;height:46%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(74deg);box-shadow:0 0 12px #ffd35c66,inset 0 0 8px #ffd35c4d}#player-sprite{z-index:10;filter:drop-shadow(0 0 12px #00e5ff99);width:60px;height:60px;transition:bottom .5s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:6%;left:50%;transform:translate(-50%)}.thruster{filter:drop-shadow(0 0 9px #ff9d3c);z-index:-1;background:linear-gradient(#fff,#ffd35c 28%,#ff7b3a 65%,#0000);border-radius:50% 50% 45% 45%/30% 30% 70% 70%;width:14px;height:28px;animation:.12s steps(2,end) infinite thrust;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}@keyframes thrust{0%{opacity:1;transform:translate(-50%)scaleY(1)scaleX(1)}to{opacity:.8;transform:translate(-50%)scaleY(.55)scaleX(.85)}}.hero-idle{animation:2s ease-in-out infinite heroFloat}.hero-jump{animation:.5s ease-out heroJump}.hero-fall{animation:.5s ease-in heroBonk}@keyframes heroFloat{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(-8px)}}@keyframes heroJump{0%{filter:drop-shadow(0 0 10px var(--neon-cyan));transform:translate(-50%)scale(1)translateY(0)}50%{filter:drop-shadow(0 0 30px var(--neon-yellow));transform:translate(-50%)scale(1.1,.9)translateY(-30px)}to{filter:drop-shadow(0 0 10px var(--neon-cyan));transform:translate(-50%)scale(1)translateY(0)}}@keyframes heroBonk{0%,to{filter:drop-shadow(0 0 10px var(--neon-cyan));transform:translate(-50%)rotate(0)}20%{filter:drop-shadow(0 0 20px var(--neon-pink));transform:translate(calc(-50% - 15px))rotate(-15deg)}40%{transform:translate(calc(15px - 50%))rotate(15deg)}60%{transform:translate(calc(-50% - 10px))rotate(-10deg)}80%{transform:translate(calc(10px - 50%))rotate(10deg)}}.game-controls{border:1px solid #ffffff1a;border-bottom:4px solid var(--neon-pink);background:#0d1426eb;border-radius:16px;flex-direction:column;flex:2;justify-content:center;gap:1rem;padding:1.5rem;display:flex}.answer-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.8rem;display:grid}.answer-btn{font-family:var(--font-retro);color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #00e5ff4d;border-radius:12px;padding:1.2rem;font-size:1.3rem;font-weight:700;transition:all .2s;position:relative;overflow:hidden}.answer-btn:before{content:"";background:linear-gradient(90deg,#0000,#00e5ff33,#0000);width:100%;height:100%;transition:all .4s;position:absolute;top:0;left:-100%}.answer-btn:hover:before{left:100%}.answer-btn:hover{border-color:var(--neon-cyan);background:#00e5ff26;transform:translateY(-2px);box-shadow:0 0 15px #00e5ff66,inset 0 0 10px #00e5ff33}.answer-btn.correct{color:#fff;text-shadow:0 0 5px #fff;background:#22c55e33;border-color:#22c55e;box-shadow:0 0 20px #22c55e99}.answer-btn.wrong{color:#fff;text-shadow:0 0 5px #fff;background:#ef444433;border-color:#ef4444;box-shadow:0 0 20px #ef444499}.answer-btn.selected{outline:2px solid var(--neon-cyan);outline-offset:2px;box-shadow:0 0 15px var(--neon-cyan)}input[type=range]{-webkit-appearance:none;background:0 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--neon-cyan);cursor:pointer;width:16px;height:16px;box-shadow:0 0 10px var(--neon-cyan);border-radius:50%;margin-top:-6px}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#fff3;border-radius:2px;width:100%;height:4px}input[type=range]:focus{outline:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#050510}::-webkit-scrollbar-thumb{background:var(--neon-cyan);border-radius:4px}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}to{transform:translate(0)}}.shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}.enemy-ship{z-index:6;pointer-events:none;filter:drop-shadow(0 0 10px #ff4fbfb3);will-change:transform, top;width:54px;height:54px;position:absolute;transform:translate(-50%)}.enemy-ship .enemy-core{transform-origin:50%;animation:1.4s ease-in-out infinite enemyBob}@keyframes enemyBob{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-6px)rotate(3deg)}}.enemy-enter{animation:.45s cubic-bezier(.34,1.56,.64,1) backwards enemyEnter}@keyframes enemyEnter{0%{opacity:0;transform:translate(-50%)translateY(-40px)scale(.4)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.enemy-destroyed{animation:.28s ease-in forwards enemyDestroyed}@keyframes enemyDestroyed{0%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)scale(1.8)rotate(35deg)}}.enemy-dive{z-index:11;transition:transform .4s cubic-bezier(.5,0,.9,.4),opacity .4s}
