:root{--bg-deep: #07091c;--bg-mid: #0a0f2a;--bg-glow: #131a44;--fg: #f6f7fb;--fg-muted: #c1c8ee;--accent: #ffd24a;--touch-min: 96px;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;height:100%;background:var(--bg-deep);color:var(--fg);font-family:Trebuchet MS,Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}body{background:radial-gradient(120% 80% at 15% 30%,var(--bg-glow) 0%,transparent 60%),radial-gradient(90% 70% at 12% 60%,rgba(255,170,60,.08),transparent 60%),var(--bg-mid)}body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 18%,#ffffff 50%,transparent 51%),radial-gradient(1px 1px at 28% 62%,#e8ecff 50%,transparent 51%),radial-gradient(1px 1px at 47% 12%,#ffffff 50%,transparent 51%),radial-gradient(1px 1px at 68% 38%,#d6def8 50%,transparent 51%),radial-gradient(1px 1px at 82% 70%,#ffffff 50%,transparent 51%),radial-gradient(1px 1px at 90% 22%,#e8ecff 50%,transparent 51%),radial-gradient(1px 1px at 35% 84%,#d6def8 50%,transparent 51%),radial-gradient(1px 1px at 58% 50%,#ffffff 50%,transparent 51%);opacity:.6}body:after{background-position:40% 25%;opacity:.35}body:before{animation:twinkle-a 4.2s ease-in-out infinite}body:after{animation:twinkle-b 5.7s ease-in-out infinite}#app{position:relative;width:100vw;height:100vh;height:100dvh}.screen{position:absolute;inset:0}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#07091cf5;z-index:50}.loading-card{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:32px}.loading-spinner{width:64px;height:64px;border-radius:50%;border:8px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin 1.1s linear infinite}.loading-text{margin:0;font-size:20px;color:var(--fg-muted)}.retry-button,.replay-button,.hud-button,.start-button{font-family:inherit;cursor:pointer;border:none;background:transparent;color:inherit}.retry-button{padding:14px 28px;border-radius:999px;background:var(--accent);color:#1a1a1a;font-weight:700;font-size:18px;min-width:var(--touch-min);min-height:var(--touch-min)}#start-screen{display:flex;align-items:center;justify-content:center}#start-screen:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,210,74,.18),transparent 70%)}.start-orbit{position:absolute;inset:-52px;pointer-events:none}.start-orbit .ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(255,255,255,.22);rotate:-12deg}.start-orbit img{position:absolute;width:34px;height:34px}.start-orbit .p-earth{left:10%;top:24%}.start-orbit .p-saturn{width:42px;height:34px;right:6%;top:20%}.start-orbit .p-mars{width:22px;height:22px;right:18%;bottom:10%}.start-button:before{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(255,210,74,.5);opacity:0;pointer-events:none;animation:halo 1.8s ease-out infinite}.start-button{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px;border-radius:32px;background:#ffffff0f;transition:scale .15s ease;min-width:var(--touch-min);min-height:var(--touch-min)}.start-button:hover{scale:1.03}.start-button:active{scale:.95}.start-button img{width:200px;height:200px;animation:float 2.4s ease-in-out infinite,sway 3.6s ease-in-out infinite}.start-label{font-size:20px;font-weight:700;letter-spacing:.02em;color:#f6f7fbcc;text-shadow:0 2px 0 rgba(0,0,0,.35)}#activity-screen{display:flex;flex-direction:column}.scene{position:relative;flex:1 1 auto;width:100%;overflow:hidden}.sun{position:absolute;pointer-events:none;filter:drop-shadow(0 0 26px rgba(255,200,60,.55));animation:sun-breathe 3.6s ease-in-out infinite}.orbits{position:absolute;inset:0;pointer-events:none}.orbit-arc{fill:none;stroke:#bed0ff4d;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 14}.silhouettes{position:absolute;inset:0;pointer-events:auto}.silhouette{position:absolute;display:flex;align-items:center;justify-content:center;filter:grayscale(1) brightness(1.25) contrast(1.05) drop-shadow(0 0 10px rgba(190,205,255,.18));opacity:.55}.silhouette:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px dotted rgba(190,205,255,.28);pointer-events:none}.silhouette img{width:100%;height:100%}.silhouette.is-home-call{animation:home-call .8s ease-in-out infinite}.silhouette.is-pulse{animation:pulse 1.6s ease-in-out infinite}.planets-layer{position:absolute;inset:0;pointer-events:none;z-index:10}.planet{position:absolute;top:0;left:0;min-width:var(--touch-min);min-height:var(--touch-min);display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;transition:transform var(--return-ms, .5s) cubic-bezier(.22,1,.36,1);will-change:transform;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}.planet-art{pointer-events:none}.planet:after{content:"";position:absolute;inset:2px;border-radius:50%;border:6px solid var(--accent);pointer-events:none;opacity:0;scale:.75;transition:opacity .15s ease,scale .15s ease}.planet.is-lifted{transition:none;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55)) brightness(1.08)}.planet.is-lifted:not([data-placed]){scale:1.08}.planet.is-selected:after{opacity:1;scale:1;animation:selected-bounce-in .3s cubic-bezier(.34,1.56,.64,1)}.planet.is-selected{filter:drop-shadow(0 0 18px var(--accent)) brightness(1.12)}.planet.is-celebrating{animation:celebrate .9s ease-out}.planet.is-celebrating:before{content:"";position:absolute;inset:-6px;border-radius:50%;border:5px solid var(--accent);opacity:0;pointer-events:none;animation:ring-burst .7s ease-out}.planet.is-celebrating:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:26px -20px 0 2px #ffd24a,-26px -20px 0 2px #ffd24a,26px 20px 0 2px #ffd24a,-26px 20px 0 2px #ffd24a,0 -34px 0 1px #fff,0 34px 0 1px #fff;opacity:0;pointer-events:none;animation:sparkle-out .7s ease-out}.planet.is-wiggle{transform-origin:50% 90%;animation:hop-and-rock 1.1s ease-in-out infinite}.planet.is-orbiting{animation:victory-spin 4s cubic-bezier(.3,0,.2,1)}.planets-layer .planet:not(.is-lifted):not(.is-selected):not(.is-wiggle):not(.is-celebrating):not([data-placed]){animation:dock-bob 3.2s ease-in-out infinite}.planets-layer .planet:not(.is-lifted):not(.is-selected):not(.is-wiggle):not(.is-celebrating):not([data-placed])[data-planet=mars]{animation-delay:.45s}.planets-layer .planet:not(.is-lifted):not(.is-selected):not(.is-wiggle):not(.is-celebrating):not([data-placed])[data-planet=jupiter]{animation-delay:.9s}.planets-layer .planet:not(.is-lifted):not(.is-selected):not(.is-wiggle):not(.is-celebrating):not([data-placed])[data-planet=saturn]{animation-delay:1.35s}.caption{position:absolute;left:50%;bottom:calc(var(--touch-min) + 88px);transform:translate(-50%);width:min(90%,40rem);margin:0;pointer-events:none;padding:14px 26px;background:#080b20eb;border:3px solid rgba(255,210,74,.4);border-radius:18px;box-shadow:0 6px 18px #00000073;font-size:clamp(24px,4.5vmin,34px);line-height:1.35;text-wrap:balance;font-weight:600;color:var(--fg);text-align:center;z-index:10}.dock{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));min-height:calc(var(--touch-min) + 24px);background:linear-gradient(180deg,transparent,rgba(7,9,28,.75));z-index:5;pointer-events:none}.dock-slot{pointer-events:none;display:flex;align-items:center;justify-content:center;min-width:var(--touch-min);min-height:var(--touch-min);position:relative}.dock-rest-mark{position:absolute;width:var(--touch-min);height:var(--touch-min);border-radius:50%;border:3px dashed rgba(255,255,255,.32);box-shadow:inset 0 0 14px #c1c8ee1a;pointer-events:none}.hud{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;display:flex;gap:12px;z-index:12}.hud-button{width:var(--touch-min);height:var(--touch-min);border-radius:50%;border:2px solid rgba(255,255,255,.14);background:#07091cb3;display:flex;align-items:center;justify-content:center;transition:scale .12s ease,background-color .12s ease}.hud-button:hover{background:#141a3cd9}.hud-button:active{scale:.92}.hud-button img{width:48px;height:48px}.completion-overlay{position:absolute;inset:0;flex-direction:column;gap:28px;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 45%,transparent 40%,rgba(7,9,28,.55) 100%);z-index:20;animation:fade-in .4s ease-out}.completion-overlay:before{content:"";position:absolute;width:560px;height:400px;border-radius:50%;background:radial-gradient(closest-side,rgba(13,17,35,.55),transparent);pointer-events:none}.completion-overlay>*{position:relative}.completion-title{margin:0;font-size:clamp(40px,8vmin,64px);font-weight:700;color:var(--accent);text-shadow:0 3px 0 rgba(0,0,0,.4)}.replay-button{width:calc(var(--touch-min) * 1.6);height:calc(var(--touch-min) * 1.6);border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #ffd24a2e,0 8px 20px #00000080;animation:attract 1.6s ease-in-out infinite}.replay-button img{width:96px;height:96px;animation:slow-spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes twinkle-a{0%,to{opacity:.6}50%{opacity:.38}}@keyframes twinkle-b{0%,to{opacity:.3}50%{opacity:.52}}@keyframes sway{0%,to{rotate:-2deg}50%{rotate:2deg}}@keyframes sun-breathe{0%,to{scale:1}50%{scale:1.035}}@keyframes pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.08);opacity:.65}}@keyframes hop-and-rock{0%,to{translate:0 0;rotate:0deg}25%{translate:0 -9px;rotate:-5deg}50%{translate:0 0;rotate:0deg}75%{translate:0 -6px;rotate:5deg}}@keyframes halo{0%{opacity:.4;scale:1}to{opacity:0;scale:1.12}}@keyframes home-call{0%,to{opacity:.55}50%{opacity:.9}}@keyframes slow-spin{to{rotate:360deg}}@keyframes celebrate{0%{scale:1}40%{scale:1.18}to{scale:1}}.retry-button:focus-visible,.start-button:focus-visible,.hud-button:focus-visible,.replay-button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@keyframes selected-bounce-in{0%{scale:.6}to{scale:1}}@keyframes victory-spin{0%{rotate:0deg;scale:1}50%{rotate:180deg;scale:1.15}to{rotate:360deg;scale:1}}@keyframes ring-burst{0%{opacity:.9;scale:.6}to{opacity:0;scale:1.9}}@keyframes sparkle-out{0%{opacity:1;scale:.4}70%{opacity:1}to{opacity:0;scale:1.5}}@keyframes fade-in{0%{opacity:0}}@keyframes attract{0%,to{box-shadow:0 0 0 6px #ffd24a2e,0 8px 20px #00000080}50%{box-shadow:0 0 0 16px #ffd24a52,0 8px 20px #00000080}}@keyframes dock-bob{0%,to{translate:0 0}50%{translate:0 -6px}}@media (prefers-reduced-motion: reduce){body:before,body:after,.replay-button,.completion-overlay,.start-button img,.start-button:before,.replay-button img,.loading-spinner,.planets-layer .planet{animation:none!important}.start-button:before{opacity:.25}.planet.is-selected:after{animation:none!important}.planet.is-celebrating:before,.planet.is-celebrating:after{animation:none!important;opacity:0!important}.planet.is-wiggle,.planet.is-orbiting,.planet.is-celebrating{animation:gentle-pulse 1.4s ease-in-out infinite!important}.sun{animation:gentle-pulse 2s ease-in-out infinite!important}}@keyframes gentle-pulse{0%,to{opacity:.85}50%{opacity:1}}