:root{--bg:#04030f;--c:#18f0ff;--m:#ff2bd6;--g:#39ff88;--y:#ffd23f;--o:#ff9a2b;--r:#ff3355;--line:#2a3a8a;--s:min(92vw,56vh,520px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 50% 0,#1a0b45,var(--bg) 70%);font-family:'Orbitron',sans-serif;color:#fff;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;overflow-x:hidden}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.main-wrapper{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;padding:12px 10px 18px}
.top-title{font-size:clamp(1.8rem,7vw,2.8rem);letter-spacing:12px;margin:0 0 10px 12px;color:#fff;text-shadow:0 0 14px var(--c),0 0 34px var(--m),3px 3px 0 var(--m);font-weight:800}
.bottom-footer{font-size:.62rem;letter-spacing:4px;color:#5a64a8;margin:16px 0 0;text-transform:uppercase;text-align:center}
.game-container{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.side-col{display:flex;flex-direction:column;gap:12px;width:min(92vw,420px)}

/* ---------- solar console ---------- */
.console{position:relative;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#0e1440 0%,#080b25 55%,#03040e 100%);border:3px solid var(--line);box-shadow:0 0 40px #18f0ff33,0 0 90px #ff2bd622,inset 0 0 70px #000}
.console.fail{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.orbit{position:absolute;border-radius:50%;border:1px dashed #6a7bff55;pointer-events:none}
.orbit-outer{inset:12%;animation:spin 120s linear infinite}
.orbit-inner{inset:31%;border-style:solid;border-color:#18f0ff22}
@keyframes spin{to{transform:rotate(360deg)}}

.planet{position:absolute;transform:translate(-50%,-50%);width:calc(var(--s)*var(--k));height:calc(var(--s)*var(--k));padding:0;margin:0;border:0;background:none;border-radius:50%;cursor:pointer;outline:none;z-index:2;touch-action:manipulation}
.planet .sphere{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:inset calc(var(--s)*-.012) calc(var(--s)*-.012) calc(var(--s)*.03) rgba(0,0,0,.75),0 0 12px var(--glow);filter:saturate(1.05) brightness(.72);transition:filter .12s,box-shadow .12s,transform .12s}
.planet:hover .sphere{filter:saturate(1.2) brightness(.95)}
.planet.active{z-index:5}
.planet.active .sphere{filter:saturate(1.7) brightness(1.55);transform:scale(1.14);box-shadow:inset calc(var(--s)*-.012) calc(var(--s)*-.012) calc(var(--s)*.02) rgba(0,0,0,.35),0 0 calc(var(--s)*.07) calc(var(--s)*.018) var(--glow)}
.planet.active:after{content:"";position:absolute;inset:-6%;border-radius:50%;border:2px solid var(--glow);animation:ping .5s ease-out forwards;pointer-events:none}
@keyframes ping{to{transform:scale(1.6);opacity:0}}
.center{left:50%;top:50%}

.sun{--k:.17;--glow:#ffae00}.sun .sphere{background:radial-gradient(circle at 35% 30%,#fff7b8,#ffc21f 35%,#ff6a00 85%)}
.sun:before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,#ffb30055 40%,#ffb30000 70%);animation:pulse 3s ease-in-out infinite;pointer-events:none}
@keyframes pulse{50%{transform:scale(1.18);opacity:.7}}
.mercury{--k:.125;--glow:#c9c2ba}.mercury .sphere{background:radial-gradient(circle at 30% 35%,#4b4640 0 6%,#0000 7%),radial-gradient(circle at 65% 62%,#4b464088 0 9%,#0000 10%),radial-gradient(circle at 35% 30%,#e0dbd3,#8e8780 55%,#3e3a36)}
.venus{--k:.145;--glow:#ffc878}.venus .sphere{background:radial-gradient(circle at 35% 30%,#fbe3b0,#d99a4a 55%,#7a4a1c)}
.earth{--k:.25;--glow:#38b6ff}.earth .sphere{background:radial-gradient(circle at 28% 38%,#3fae55 0 11%,#0000 12%),radial-gradient(circle at 62% 62%,#3fae55 0 15%,#0000 16%),radial-gradient(circle at 72% 26%,#3fae55 0 8%,#0000 9%),radial-gradient(circle at 35% 30%,#8fdcff,#1c6fd1 55%,#08235e)}
.earth .sphere:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#fff0,#ffffff66 8%,#fff0 18%,#ffffff55 40%,#fff0 55%,#ffffff66 78%,#fff0);animation:spin 40s linear infinite;mix-blend-mode:screen;opacity:.55}
.mars{--k:.135;--glow:#ff6a3d}.mars .sphere{background:radial-gradient(circle at 70% 25%,#ffffffaa 0 5%,#0000 6%),radial-gradient(circle at 35% 30%,#ff9a6c,#c4472a 55%,#5c1a0e)}
.jupiter{--k:.185;--glow:#ffb066}.jupiter .sphere{background:radial-gradient(ellipse at 62% 64%,#c4472a 0 9%,#0000 10%),repeating-linear-gradient(180deg,#f3d7ae 0 8%,#c98a4e 8% 16%,#efe0c4 16% 22%,#9b5c32 22% 30%),#c98a4e}
.jupiter .sphere:after,.saturn .sphere:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3,#0000 45%)}
.saturn{--k:.15;--glow:#ffd98a}.saturn .sphere{background:repeating-linear-gradient(180deg,#f6e2ae 0 12%,#d9b878 12% 24%,#ead49a 24% 32%)}
.saturn:before{content:"";position:absolute;left:-42%;right:-42%;top:34%;bottom:34%;border-radius:50%;border:calc(var(--s)*.014) solid #e8cf9acc;box-shadow:0 0 10px #ffd98a88;transform:rotate(-20deg);pointer-events:none;z-index:3}
.uranus{--k:.145;--glow:#6af0ee}.uranus .sphere{background:radial-gradient(circle at 35% 30%,#d8fffd,#52c9d3 55%,#16667a)}
.neptune{--k:.145;--glow:#4a7bff}.neptune .sphere{background:radial-gradient(ellipse at 40% 60%,#ffffff55 0 6%,#0000 7%),radial-gradient(circle at 35% 30%,#8fb4ff,#2b4fe0 55%,#0b1760)}
.moon{--k:.125;--glow:#e8ecff}.moon .sphere{background:radial-gradient(circle at 32% 36%,#8a8a96 0 8%,#0000 9%),radial-gradient(circle at 62% 56%,#8a8a96aa 0 11%,#0000 12%),radial-gradient(circle at 48% 78%,#8a8a96aa 0 6%,#0000 7%),radial-gradient(circle at 35% 30%,#fafaff,#b9bac8 55%,#5a5a68)}

/* ---------- HUD ---------- */
.hud{background:linear-gradient(#0c0a2e,#070620);border:2px solid #18f0ff55;border-radius:14px;padding:12px 14px;text-align:center;box-shadow:0 0 22px #18f0ff22,inset 0 0 20px #000}
.user-name-tag{font-size:.65rem;color:var(--o);letter-spacing:3px}
.hud-row{display:flex;justify-content:space-around;margin:4px 0}
.counter-label{font-size:.55rem;color:#7d88d0;letter-spacing:2px}
.digital-display{font-family:'Share Tech Mono',monospace;font-size:2rem;color:var(--g);text-shadow:0 0 12px var(--g)}
.digital-display.dim{color:var(--y);text-shadow:0 0 10px var(--y)}
.planet-name{height:1.1em;font-size:.7rem;letter-spacing:4px;color:var(--c);text-shadow:0 0 8px var(--c);margin-top:2px}
.blueprint-display{font-family:'Share Tech Mono',monospace;font-size:1.05rem;letter-spacing:2px;color:#fff;min-height:1.5em;margin:6px 0;word-break:break-word;text-shadow:0 0 8px var(--m)}
.status-text{font-size:.8rem;letter-spacing:3px;color:var(--y);font-weight:700}

/* ---------- panel & buttons ---------- */
.quiz-panel{display:flex;flex-direction:column;gap:10px}
.mode-selector{display:flex;gap:8px}
.mode-btn{flex:1;font-family:inherit;font-size:.65rem;font-weight:700;letter-spacing:1px;padding:10px 6px;border-radius:10px;border:2px solid #2a3a8a;background:#0a0c28;color:#7d88d0;cursor:pointer}
.mode-btn.active{border-color:var(--c);color:var(--c);box-shadow:0 0 14px #18f0ff66;background:#06182a}
.control-btn{font-family:inherit;font-weight:800;letter-spacing:2px;font-size:.85rem;padding:13px 18px;border-radius:30px;border:none;cursor:pointer;color:#021;transition:transform .1s,opacity .2s}
.control-btn:active{transform:scale(.95)}
.control-btn.init{background:linear-gradient(135deg,#18f0ff,#39ff88);box-shadow:0 0 20px #18f0ff77}
.control-btn.guess{background:linear-gradient(135deg,#ff2bd6,#ff9a2b);box-shadow:0 0 20px #ff2bd677}
.control-btn.ghost{background:#0a0c28;color:#9aa6ff;border:2px solid #2a3a8a}
.control-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.song-counter-box{display:flex;justify-content:center;gap:10px;align-items:baseline;font-size:.7rem;color:#9aa6ff;letter-spacing:2px}
.quiz-number{font-family:'Share Tech Mono',monospace;font-size:1.4rem;color:var(--y);text-shadow:0 0 10px var(--y)}

/* ---------- modals ---------- */
.modal-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,#1d0b4acc,#03020df5);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-content{background:linear-gradient(#0c0a2e,#070620);border:2px solid var(--c);border-radius:16px;padding:22px 20px;width:min(92vw,380px);text-align:center;box-shadow:0 0 40px #18f0ff44,0 0 80px #ff2bd622}
.modal-content h2{margin:0 0 8px;font-size:1.2rem;letter-spacing:4px;text-shadow:0 0 12px var(--c)}
.modal-content p{font-size:.72rem;color:#b9c4ff;margin:0 0 12px;line-height:1.5}
.modal-content input{width:100%;font-family:'Share Tech Mono',monospace;font-size:1.1rem;padding:12px;border-radius:10px;border:2px solid var(--line);background:#04051a;color:#fff;text-align:center;outline:none;margin-bottom:12px}
.modal-content input:focus{border-color:var(--c);box-shadow:0 0 14px #18f0ff66}
.modal-row{display:flex;gap:10px;justify-content:center}
.guess-msg{min-height:1.2em;color:var(--r)!important;font-weight:700}

/* ---------- wide screens ---------- */
@media (min-width:900px){
 :root{--s:min(62vh,540px)}
 body{align-items:center}
 .game-container{flex-direction:row;justify-content:center;align-items:center;gap:34px}
 .side-col{width:380px}
}