/* Screen-facing sprites on a projected chart. Only tiny surface layers animate;
   camera projection and SVG guides redraw on interaction, never on an idle loop. */
.solar-view-controls { position: absolute; z-index: 1001; top: .4rem; right: .4rem; display: flex; gap: .25rem; }
.solar-view-controls button { border: 1px solid rgb(148 163 184 / 22%); border-radius: .2rem; background: rgb(15 23 42 / 85%); padding: .15rem .45rem; color: #94a3b8; font-size: .68rem; cursor: pointer; }
.solar-view-controls button:hover, .solar-view-controls button[aria-pressed="true"] { color: #e0e7ff; border-color: rgb(129 140 248 / 65%); background: rgb(79 70 229 / 20%); }
.solar-view-controls button:disabled { opacity: .35; cursor: default; }
.solar-viewport { position: relative; width: 100%; height: clamp(270px, 30vh, 340px); overflow: hidden; container-type: size; cursor: grab; user-select: none; touch-action: pan-y; background: radial-gradient(ellipse at 50% 50%, rgb(49 46 129 / 16%), transparent 60%), radial-gradient(circle at 16% 26%, rgb(148 163 184 / 55%) 0 1px, transparent 1.5px), radial-gradient(circle at 79% 71%, rgb(148 163 184 / 35%) 0 1px, transparent 1.5px), radial-gradient(circle at 35% 84%, rgb(148 163 184 / 35%) 0 1px, transparent 1.5px), radial-gradient(circle at 88% 13%, rgb(148 163 184 / 50%) 0 1px, transparent 1.5px); }
.solar-viewport.is-dragging { cursor: grabbing; }
.solar-viewport:focus-visible { outline: 1px solid #818cf8; outline-offset: -2px; }
.solar-guides { position: absolute; inset: 16px 0; width: 100%; height: calc(100% - 32px); overflow: visible; pointer-events: none; }
.solar-orbit { stroke: #818cf8; stroke-width: 1; opacity: .25; }
.solar-orbit--1 { stroke: #67e8f9; stroke-dasharray: 3 6; opacity: .2; }
.solar-orbit--3 { stroke: #c4b5fd; stroke-dasharray: 3 6; opacity: .2; }
.solar-origin { fill: none; stroke: rgb(165 180 252 / 20%); stroke-width: 1; }
.solar-selection-line { stroke: #a5b4fc; stroke-width: 1; stroke-dasharray: 4 5; opacity: .45; }
.solar-node { --solar-accent: #818cf8; --solar-diameter: clamp(14px, 3.2cqw, 24px); --solar-step: min(18.375cqw, calc((100cqh - 32px) * .27022059)); position: absolute; width: 0; height: 0; left: calc(50% + (var(--solar-x) * .913545 + var(--solar-z) * .406737) * var(--solar-step)); top: calc(50% + (var(--solar-y) * .515038 + var(--solar-x) * .348638 - var(--solar-z) * .783035) * var(--solar-step)); }
.solar-node[hidden] { display: none; }
.solar-node.is-selected, .solar-node:focus-within, .solar-node:hover { z-index: 1000 !important; }
.solar-node--own { --solar-accent: #38bdf8; }
.solar-node--friendly { --solar-accent: #4ade80; }
.solar-node--occupied { --solar-accent: #fb7185; }
.solar-node--free { --solar-accent: #a5b4fc; }
.solar-node--star { --solar-accent: #fbbf24; --solar-diameter: clamp(26px, 6cqw, 42px); }
.solar-node--void { --solar-diameter: 12px; }
.solar-node--belt { --solar-accent: #2dd4bf; }
.solar-pick { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: max(24px, var(--solar-diameter)); height: max(24px, var(--solar-diameter)); transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent; color: var(--solar-accent); cursor: pointer; }
.solar-pick:focus-visible { outline: 1px solid #e0e7ff; outline-offset: 5px; border-radius: 50%; }
.solar-surface { position: relative; display: block; width: var(--solar-diameter); height: var(--solar-diameter); overflow: hidden; border-radius: 50%; border: 1px solid rgb(203 213 225 / 55%); background: radial-gradient(circle at 30% 26%, hsl(var(--solar-hue) 32% 72%), hsl(var(--solar-hue) 28% 34%) 50%, #0f172a 88%); box-shadow: inset -4px -3px 6px rgb(2 6 23 / 65%), 0 0 8px rgb(129 140 248 / 15%); transition: transform .15s ease; }
.solar-pick:hover .solar-surface { transform: scale(1.1); }
.solar-node.is-selected .solar-surface { outline: 1px solid var(--solar-accent); outline-offset: 4px; }
.solar-atmosphere { position: absolute; inset: -10%; border-radius: 50%; opacity: .4; background: radial-gradient(ellipse at 28% 38%, rgb(226 232 240 / 80%) 0 8%, transparent 20%), radial-gradient(ellipse at 66% 61%, rgb(226 232 240 / 75%) 0 9%, transparent 23%); animation: solar-cloud-drift 65s linear infinite; animation-delay: var(--solar-delay); pointer-events: none; }
.solar-surface::before { position: absolute; z-index: 2; inset: 0; border-radius: 50%; background: radial-gradient(circle at 25% 20%, rgb(255 255 255 / 30%), transparent 48%), linear-gradient(120deg, transparent 35%, rgb(2 6 23 / 70%)); content: ""; pointer-events: none; }
.solar-node--colonized .solar-surface { border-color: var(--solar-accent); background: radial-gradient(ellipse at 37% 30%, #8fbba3 0 10%, transparent 27%), radial-gradient(ellipse at 72% 70%, #4d7c62 0 16%, transparent 35%), radial-gradient(circle at 30% 24%, #93c5fd, #1d4ed8 43%, #172554 78%); }
.solar-colony-light { position: absolute; z-index: 3; inset: 0; opacity: .65; background: radial-gradient(circle at 31% 40%, #fde68a 0 1px, transparent 1.6px), radial-gradient(circle at 62% 65%, #fde68a 0 .8px, transparent 1.4px); animation: solar-city-lights 7s ease-in-out infinite alternate; animation-delay: var(--solar-delay); pointer-events: none; }
.solar-node--star .solar-surface { overflow: visible; border-color: #fef3c7; background: radial-gradient(circle at 33% 28%, #fff7c2 0 6%, #fbbf24 33%, #f97316 76%, #9a3412); box-shadow: 0 0 14px rgb(251 191 36 / 35%); }
.solar-node--star .solar-atmosphere { inset: 0; opacity: .35; background: repeating-conic-gradient(from 0deg, transparent 0 20deg, rgb(255 237 213 / 65%) 28deg 35deg, transparent 45deg 80deg); animation-duration: 50s; }
.solar-node--star .solar-surface::before { background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / 35%), transparent 60%); }
.solar-node--star .solar-surface::after { position: absolute; z-index: -1; inset: -50%; border-radius: 50%; background: radial-gradient(circle, rgb(251 191 36 / 28%) 35%, rgb(249 115 22 / 12%) 52%, transparent 72%); content: ""; animation: solar-corona 8s ease-in-out infinite alternate; pointer-events: none; }
.solar-node--void .solar-surface { border: 1px dashed rgb(100 116 139 / 65%); background: rgb(15 23 42 / 40%); box-shadow: none; }
.solar-node--void .solar-atmosphere, .solar-node--void .solar-surface::before { display: none; }
.solar-node--belt .solar-surface { border-color: #5eead4; border-radius: 38%; background: radial-gradient(circle at 30% 25%, #99f6e4, #0f766e 45%, #134e4a 80%); }
.solar-coordinate { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); padding: 0 2px; border-radius: 2px; background: rgb(2 6 23 / 78%); font-size: clamp(8px, 1.8cqw, 10px); line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.solar-node--void .solar-coordinate { color: #64748b; }
.solar-node.is-selected .solar-coordinate { color: #e0e7ff; outline: 1px solid rgb(129 140 248 / 40%); }
.solar-ownership-dot { position: absolute; right: -3px; top: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--solar-accent); box-shadow: 0 0 0 2px #020617; }
.solar-debris-mark { position: absolute; right: -7px; top: -4px; color: #4ade80; font-size: 9px; }
.solar-system.is-paused .solar-atmosphere, .solar-system.is-paused .solar-colony-light, .solar-system.is-paused .solar-surface::after { animation-play-state: paused; }
@keyframes solar-cloud-drift { to { transform: rotate(360deg); } }
@keyframes solar-city-lights { from { opacity: .35; } to { opacity: .85; } }
@keyframes solar-corona { from { opacity: .5; transform: scale(.96); } to { opacity: .9; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .solar-atmosphere, .solar-colony-light, .solar-surface::after { animation: none !important; } .solar-surface { transition: none; } }
@media (max-width: 640px) { .solar-viewport { height: auto; aspect-ratio: 4 / 3; } }