*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0D0B1E;font-family:Arial,Helvetica,sans-serif}
body{position:relative}

#stars,#stars2,#stars3{position:fixed;inset:0;pointer-events:none}
#stars{width:1px;height:1px;background:transparent;box-shadow:var(--star1);animation:animStar 50s linear infinite}
#stars::after{content:"";position:absolute;top:2000px;width:1px;height:1px;background:transparent;box-shadow:var(--star1)}
#stars2{width:2px;height:2px;background:transparent;box-shadow:var(--star2);animation:animStar 100s linear infinite}
#stars2::after{content:"";position:absolute;top:2000px;width:2px;height:2px;background:transparent;box-shadow:var(--star2)}
#stars3{width:3px;height:3px;background:transparent;box-shadow:var(--star3);animation:animStar 150s linear infinite}
#stars3::after{content:"";position:absolute;top:2000px;width:3px;height:3px;background:transparent;box-shadow:var(--star3)}
@keyframes animStar{from{transform:translateY(0)}to{transform:translateY(-2000px)}}

canvas{display:block;position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10}

#controls{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:10px 14px}
#controls-toggle{background:none;border:none;cursor:pointer;color:#93C5FD;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;padding:2px 8px;border-radius:10px;width:100%;transition:background 0.15s,color 0.15s}
#controls-toggle:hover{background:rgba(255,255,255,0.08);color:#BAE6FD}
.toggle-icon{display:inline-block;transition:transform 0.32s ease;line-height:1;font-size:9px}
#controls.collapsed .toggle-icon{transform:rotate(180deg)}
#controls-body{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;overflow:hidden;max-height:500px;opacity:1;margin-top:8px;transition:max-height 0.35s ease,opacity 0.28s ease,margin-top 0.32s ease}
#controls.collapsed #controls-body{max-height:0;opacity:0;margin-top:0}
.controls-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
#controls label{color:#93C5FD;font-size:12px;white-space:nowrap}
#speedSlider{-webkit-appearance:none;appearance:none;width:110px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2);outline:none;cursor:pointer}
#speedSlider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#60A5FA;border:2px solid #1E3A8A;cursor:pointer}
#speedVal{color:#FFF;font-size:12px;min-width:28px;text-align:right}
.planet-tiles{display:grid;grid-template-columns:repeat(5,minmax(72px,1fr));gap:8px;width:min(424px,calc(100vw - 40px))}
.planet-tile{border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:8px 6px 7px;background:rgba(10,15,30,0.60);color:#E2E8F0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
.planet-tile:hover{transform:translateY(-1px);border-color:rgba(125,211,252,0.55)}
.planet-tile.active{border-color:rgba(96,165,250,0.95);background:rgba(16,24,45,0.88);box-shadow:0 0 0 1px rgba(96,165,250,0.25),0 8px 20px rgba(2,6,23,0.28)}
.planet-preview{width:40px;height:40px;border-radius:50%;position:relative;overflow:hidden;flex:none;display:block;background:linear-gradient(145deg,#64748b 0%,#334155 100%)}
.planet-preview .glow{position:absolute;inset:0;border-radius:50%;opacity:.95;box-shadow:inset 7px 7px 0 rgba(255,255,255,0.2)}
.planet-preview .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.planet-preview .surface{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.planet-preview .surface::before,.planet-preview .surface::after{content:"";position:absolute;border-radius:50%}
.planet-preview.earth{background:linear-gradient(145deg,#5ea0ff 0%,#2f67d3 100%)}
.planet-preview.earth .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.28)}
.planet-preview.earth .surface::before{width:18px;height:12px;left:3px;top:11px;background:#2F855A;transform:rotate(-12deg);box-shadow:14px -6px 0 #2E7D4F,13px 11px 0 #3B9B63}
.planet-preview.earth .surface::after{width:12px;height:10px;right:5px;top:18px;background:#2B6F49;box-shadow:-16px 4px 0 #2F855A}
.planet-preview.moon{background:linear-gradient(145deg,#d3d7de 0%,#8d95a3 100%)}
.planet-preview.moon .glow{box-shadow:inset 6px 6px 0 rgba(255,255,255,0.18)}
.planet-preview.moon .surface::before{width:9px;height:9px;left:8px;top:9px;background:#7C8591;box-shadow:18px 6px 0 #6B7280,9px 17px 0 #848B95}
.planet-preview.moon .surface::after{width:7px;height:7px;right:8px;top:21px;background:#707883;box-shadow:-18px -2px 0 #8C93A0,-8px -11px 0 #707883}
.planet-preview.sun{background:linear-gradient(145deg,#fde68a 0%,#f59e0b 100%)}
.planet-preview.sun .glow{box-shadow:inset 8px 8px 0 rgba(255,255,255,0.22),0 0 18px rgba(252,211,77,0.45)}
.planet-preview.sun .surface::before{width:26px;height:8px;left:5px;top:10px;background:rgba(249,115,22,0.24);box-shadow:0 11px 0 rgba(245,158,11,0.24),0 20px 0 rgba(255,255,255,0.12)}
.planet-preview.sun .surface::after{width:10px;height:10px;left:19px;top:16px;background:rgba(255,255,255,0.16);box-shadow:-12px -10px 0 rgba(251,191,36,0.24)}
.planet-preview.mercury{background:linear-gradient(145deg,#d6d3d1 0%,#737373 100%)}
.planet-preview.mercury .glow{box-shadow:inset 6px 6px 0 rgba(255,255,255,0.18)}
.planet-preview.mercury .surface::before{width:10px;height:10px;left:7px;top:8px;background:#78716C;box-shadow:18px 6px 0 #A8A29E,10px 16px 0 #8C8177}
.planet-preview.mercury .surface::after{width:8px;height:8px;right:7px;top:21px;background:#57534E;box-shadow:-17px -2px 0 #6B7280}
.planet-preview.venus{background:linear-gradient(145deg,#f7d27a 0%,#c0841a 100%)}
.planet-preview.venus .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.18)}
.planet-preview.venus .surface::before{width:24px;height:9px;left:5px;top:11px;background:rgba(255,251,235,0.18);box-shadow:0 11px 0 rgba(217,119,6,0.18),0 20px 0 rgba(255,255,255,0.12)}
.planet-preview.venus .surface::after{width:8px;height:8px;left:18px;top:16px;background:rgba(202,138,4,0.18);box-shadow:10px -6px 0 rgba(255,255,255,0.15)}
.planet-preview.mars{background:linear-gradient(145deg,#fb7d67 0%,#b91c1c 100%)}
.planet-preview.mars .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.18)}
.planet-preview.mars .surface::before{width:10px;height:10px;left:8px;top:9px;background:#9A3412;box-shadow:18px 7px 0 #EA580C,10px 15px 0 #F97316}
.planet-preview.mars .surface::after{width:8px;height:8px;right:8px;top:20px;background:#C2410C;box-shadow:-16px -2px 0 #FB923C}
.planet-preview.jupiter{background:linear-gradient(145deg,#f5d0a5 0%,#b45309 100%)}
.planet-preview.jupiter .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.20)}
.planet-preview.jupiter .surface::before{width:28px;height:6px;left:4px;top:10px;background:rgba(184,112,48,0.24);box-shadow:0 9px 0 rgba(245,196,120,0.24),0 18px 0 rgba(214,148,67,0.22)}
.planet-preview.jupiter .surface::after{width:10px;height:10px;left:22px;top:17px;background:rgba(153,64,37,0.22);box-shadow:-11px -8px 0 rgba(255,243,214,0.14)}
.planet-preview.saturn{background:linear-gradient(145deg,#f6e2b2 0%,#d1ab5b 100%)}
.planet-preview.saturn .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.25)}
.planet-preview.saturn .ring{width:54px;height:18px;border:5px solid rgba(232,214,163,0.95);border-left-color:rgba(181,145,72,0.95);border-right-color:rgba(181,145,72,0.95);transform:translate(-50%,-50%) rotate(-18deg)}
.planet-preview.saturn .surface::before{width:30px;height:7px;left:5px;top:11px;background:rgba(209,160,73,0.32);box-shadow:0 10px 0 rgba(171,122,39,0.26),0 20px 0 rgba(255,232,181,0.18)}
.planet-preview.saturn .surface::after{width:8px;height:8px;left:16px;top:16px;background:rgba(153,98,23,0.28);box-shadow:10px -6px 0 rgba(153,98,23,0.24)}
.planet-preview.uranus{background:linear-gradient(145deg,#b3f0ff 0%,#38bdf8 100%)}
.planet-preview.uranus .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.20)}
.planet-preview.uranus .surface::before{width:24px;height:8px;left:6px;top:10px;background:rgba(224,242,254,0.18);box-shadow:0 11px 0 rgba(125,211,252,0.16)}
.planet-preview.uranus .surface::after{width:8px;height:8px;right:7px;top:20px;background:rgba(14,165,233,0.16);box-shadow:-10px -7px 0 rgba(240,249,255,0.14)}
.planet-preview.neptune{background:linear-gradient(145deg,#60a5fa 0%,#1d4ed8 100%)}
.planet-preview.neptune .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.20)}
.planet-preview.neptune .surface::before{width:24px;height:8px;left:6px;top:10px;background:rgba(191,219,254,0.16);box-shadow:0 11px 0 rgba(37,99,235,0.18)}
.planet-preview.neptune .surface::after{width:9px;height:9px;left:20px;top:17px;background:rgba(147,197,253,0.22);box-shadow:-12px -8px 0 rgba(96,165,250,0.16)}
.planet-preview.satellite{background:linear-gradient(145deg,#dde5ed 0%,#5b7082 100%)}
.planet-preview.satellite .glow{box-shadow:inset 6px 6px 0 rgba(255,255,255,0.28)}
.planet-preview.satellite .surface::before{width:36px;height:8px;left:2px;top:8px;background:#1e3a8a;box-shadow:0 16px 0 #1e3a8a}
.planet-preview.satellite .surface::after{width:10px;height:20px;left:15px;top:5px;background:linear-gradient(180deg,#e2e8f0 0%,#94a3b8 100%);border-radius:2px}
.planet-preview.blackhole{background:radial-gradient(circle at 40% 40%,#220044 0%,#000 65%);box-shadow:0 0 8px rgba(100,0,200,0.4)}
.planet-preview.blackhole .glow{box-shadow:none}
.planet-preview.blackhole .surface::before{width:38px;height:14px;left:1px;top:13px;border:1.5px solid rgba(150,50,255,0.55);border-radius:50%}
.planet-preview.blackhole .surface::after{width:8px;height:8px;left:16px;top:16px;background:#000;border-radius:50%;box-shadow:0 0 0 3px rgba(80,0,160,0.5)}
.planet-preview.nebula{background:radial-gradient(circle at 40% 35%,#7030c0 0%,#1a0a2e 70%)}
.planet-preview.nebula .glow{box-shadow:inset 5px 5px 0 rgba(255,80,200,0.18),0 0 10px rgba(200,80,255,0.2)}
.planet-preview.nebula .surface::before{width:5px;height:5px;left:10px;top:8px;background:rgba(255,255,255,0.8);border-radius:50%;box-shadow:12px 4px 0 rgba(255,255,255,0.6),4px 12px 0 rgba(255,255,255,0.5),20px 10px 0 rgba(255,255,255,0.7),2px 20px 0 rgba(255,255,255,0.4),16px 20px 0 rgba(255,255,255,0.5)}
.planet-preview.nebula .surface::after{width:4px;height:4px;left:22px;top:16px;background:rgba(80,220,200,0.8);border-radius:50%;box-shadow:-6px -4px 0 rgba(255,80,150,0.7),8px -6px 0 rgba(80,120,255,0.7)}
.planet-preview.asteroid{background:linear-gradient(145deg,#9a8a6a 0%,#3a2a1a 100%)}
.planet-preview.asteroid .glow{box-shadow:inset 5px 5px 0 rgba(255,255,255,0.1)}
.planet-preview.asteroid .surface::before{width:9px;height:9px;left:7px;top:6px;background:rgba(0,0,0,0.28);border-radius:50%;box-shadow:14px 8px 0 rgba(0,0,0,0.22),5px 18px 0 rgba(0,0,0,0.18)}
.planet-preview.asteroid .surface::after{width:7px;height:7px;left:22px;top:20px;background:rgba(0,0,0,0.2);border-radius:50%;box-shadow:-12px -3px 0 rgba(0,0,0,0.15)}
.planet-preview.comet{background:linear-gradient(145deg,#d8eeff 0%,#3070cc 100%)}
.planet-preview.comet .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.4)}
.planet-preview.comet .surface::before{width:22px;height:8px;left:14px;top:16px;background:linear-gradient(90deg,rgba(180,220,255,0.65),transparent);border-radius:0 4px 4px 0}
.planet-preview.comet .surface::after{width:13px;height:13px;left:6px;top:13px;background:radial-gradient(circle,#eef8ff,#80c0ff);border-radius:50%}
.planet-preview.pulsar{background:radial-gradient(circle,#c0fff0 0%,#008855 50%,#003322 100%)}
.planet-preview.pulsar .glow{box-shadow:inset 5px 5px 0 rgba(255,255,255,0.35),0 0 10px rgba(0,255,160,0.3)}
.planet-preview.pulsar .surface::before{width:4px;height:30px;left:18px;top:5px;background:linear-gradient(180deg,transparent,rgba(80,255,200,0.75),transparent);border-radius:2px}
.planet-preview.pulsar .surface::after{width:30px;height:4px;left:5px;top:18px;background:linear-gradient(90deg,transparent,rgba(80,255,200,0.75),transparent);border-radius:2px}
.planet-preview.gasPlanet{background:linear-gradient(145deg,#a8f5ec 0%,#1aada0 50%,#083838 100%)}
.planet-preview.gasPlanet .glow{box-shadow:inset 7px 7px 0 rgba(255,255,255,0.22)}
.planet-preview.gasPlanet .surface::before{width:26px;height:5px;left:5px;top:10px;background:rgba(0,70,70,0.38);box-shadow:0 8px 0 rgba(150,240,230,0.22),0 16px 0 rgba(0,70,70,0.3)}
.planet-preview.gasPlanet .surface::after{width:7px;height:7px;left:18px;top:14px;background:rgba(170,245,238,0.3);border-radius:50%}
.planet-preview.icePlanet{background:linear-gradient(145deg,#eaf7ff 0%,#90c8e8 40%,#1a3858 100%)}
.planet-preview.icePlanet .glow{box-shadow:inset 8px 8px 0 rgba(255,255,255,0.45)}
.planet-preview.icePlanet .surface::before{width:18px;height:2px;left:10px;top:13px;background:rgba(255,255,255,0.35);box-shadow:6px 8px 0 rgba(255,255,255,0.25),-4px 10px 0 rgba(255,255,255,0.3)}
.planet-preview.icePlanet .surface::after{width:12px;height:12px;left:6px;top:5px;background:rgba(255,255,255,0.2);border-radius:50%}
.planet-preview.lavaPlanet{background:radial-gradient(circle,#ffc800 0%,#ff5500 35%,#bb1a00 70%,#440000 100%)}
.planet-preview.lavaPlanet .glow{box-shadow:inset 4px 4px 0 rgba(255,220,100,0.3),0 0 12px rgba(255,80,0,0.35)}
.planet-preview.lavaPlanet .surface::before{width:14px;height:3px;left:6px;top:13px;background:rgba(255,200,0,0.55);transform:rotate(-22deg);box-shadow:12px 7px 0 rgba(255,140,0,0.45),-2px 14px 0 rgba(255,80,0,0.3)}
.planet-preview.lavaPlanet .surface::after{width:5px;height:5px;left:19px;top:8px;background:rgba(255,220,80,0.65);border-radius:50%;box-shadow:-7px 14px 0 rgba(255,160,0,0.5),9px 10px 0 rgba(255,100,0,0.45)}
.planet-preview.crystalPlanet{background:radial-gradient(circle at 38% 35%,#eeddff 0%,#a040f0 45%,#280050 100%)}
.planet-preview.crystalPlanet .glow{box-shadow:inset 6px 6px 0 rgba(255,255,255,0.3),0 0 8px rgba(180,80,255,0.25)}
.planet-preview.crystalPlanet .surface::before{width:7px;height:13px;left:14px;top:6px;background:rgba(220,180,255,0.38);transform:rotate(20deg);box-shadow:8px 15px 0 rgba(220,180,255,0.32),-7px 13px 0 rgba(220,180,255,0.28)}
.planet-preview.crystalPlanet .surface::after{width:5px;height:5px;left:8px;top:8px;background:rgba(255,255,255,0.55);border-radius:50%}
.planet-preview.spaceStation{background:linear-gradient(145deg,#cdd8e5 0%,#5a6a88 100%);border-radius:8px}
.planet-preview.spaceStation .glow{box-shadow:inset 5px 5px 0 rgba(255,255,255,0.28);border-radius:8px}
.planet-preview.spaceStation .surface{border-radius:4px}
.planet-preview.spaceStation .surface::before{width:32px;height:8px;left:4px;top:16px;background:#6878a0;border-radius:1px}
.planet-preview.spaceStation .surface::after{width:10px;height:20px;left:15px;top:10px;background:linear-gradient(180deg,#c5d2de,#8090b0);border-radius:2px;box-shadow:0 0 0 1px rgba(90,106,136,0.5)}
.planet-preview.wormhole{background:radial-gradient(circle,#9050ff 0%,#3818a0 35%,#0c0028 70%,#030008 100%)}
.planet-preview.wormhole .glow{box-shadow:0 0 12px rgba(100,50,240,0.4)}
.planet-preview.wormhole .surface::before{width:24px;height:24px;left:8px;top:8px;border:2px solid rgba(160,100,255,0.45);border-radius:50%;box-shadow:0 0 0 4px rgba(120,70,200,0.2)}
.planet-preview.wormhole .surface::after{width:9px;height:5px;left:15.5px;top:17.5px;background:#030008;border-radius:50%}
.planet-preview.cubeWorld{background:linear-gradient(145deg,#78bc58 0%,#224018 100%);border-radius:6px}
.planet-preview.cubeWorld .glow{box-shadow:inset 5px 5px 0 rgba(255,255,255,0.2);border-radius:6px}
.planet-preview.cubeWorld .surface{border-radius:3px}
.planet-preview.cubeWorld .surface::before{width:20px;height:20px;left:10px;top:10px;background:#3a7030;transform:rotate(15deg) skewX(-14deg);border:1px solid rgba(255,255,255,0.18)}
.planet-preview.cubeWorld .surface::after{width:20px;height:10px;left:10px;top:10px;background:#234518;transform:rotate(15deg) skewX(-14deg)}
.planet-preview.eyePlanet{background:linear-gradient(145deg,#f5e8cc 0%,#b89060 100%)}
.planet-preview.eyePlanet .glow{box-shadow:inset 5px 5px 0 rgba(255,255,255,0.2)}
.planet-preview.eyePlanet .surface::before{width:22px;height:12px;left:9px;top:14px;background:#7a3200;border-radius:50%;box-shadow:0 0 0 2px rgba(180,100,40,0.4)}
.planet-preview.eyePlanet .surface::after{width:8px;height:8px;left:16px;top:16px;background:#040000;border-radius:50%;box-shadow:-3px -2px 0 2px rgba(255,255,255,0.5)}
.planet-preview.ringWorld{background:linear-gradient(145deg,#c8a050 0%,#5c4018 100%)}
.planet-preview.ringWorld .glow{box-shadow:inset 5px 5px 0 rgba(255,255,255,0.18)}
.planet-preview.ringWorld .ring{width:50px;height:11px;border:5px solid rgba(180,136,72,0.9);border-left-color:rgba(96,64,24,0.9);border-right-color:rgba(96,64,24,0.9);transform:translate(-50%,-50%) rotate(-12deg)}
.planet-preview.ringWorld .surface::before{width:12px;height:7px;left:14px;top:16.5px;background:rgba(100,80,40,0.55);border-radius:50%}
.planet-preview.ghostPlanet{background:radial-gradient(circle,rgba(60,200,100,0.65) 0%,rgba(20,90,45,0.5) 60%,rgba(8,40,20,0.35) 100%)}
.planet-preview.ghostPlanet .glow{box-shadow:inset 5px 5px 0 rgba(255,255,255,0.14),0 0 8px rgba(60,200,100,0.2)}
.planet-preview.ghostPlanet .surface::before{width:22px;height:22px;left:9px;top:9px;border:1px dashed rgba(120,255,160,0.45);border-radius:50%}
.planet-preview.ghostPlanet .surface::after{width:6px;height:6px;left:17px;top:10px;background:rgba(180,255,210,0.65);border-radius:50%;box-shadow:-9px 12px 0 rgba(180,255,210,0.55),9px 12px 0 rgba(180,255,210,0.5)}
.tile-label{font-size:11px;line-height:1;text-align:center}
@media (max-width: 560px){.planet-tiles{grid-template-columns:repeat(3,minmax(72px,1fr));width:min(260px,calc(100vw - 40px))}}