/* =====================================================================
   ORBO v5.4: mapa em órbita da Galáxia (sistemas) e do sistema (fases).
   Canvas desenha os corpos; os botões ficam em DOM por cima.
   ===================================================================== */

.sv-wrap { position: relative; width: 100%; margin: 4px 0 14px; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--wa-28, rgba(255,255,255,0.1)), 0 12px 32px rgba(0,0,0,0.35); }
.sv-cv { display: block; width: 100%; }
/* os rótulos usam a mesma escala e foco do canvas (definidos por quadro no JS) */
.sv-nodes { position: absolute; inset: 0; will-change: transform, opacity; }

/* voltar dentro do próprio mapa */
.sv-back { position: absolute; left: 10px; top: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 12px 0 7px; border-radius: 999px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: #eef2ff; background: rgba(6,10,26,0.72); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.14), 0 4px 14px rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sv-back .i { width: 15px; height: 15px; }
.sv-back:active { transform: translateY(1px); background: rgba(10,16,38,0.9); }

.sv-node { position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); padding: 0; background: none; border: 0; color: var(--text); }
.sv-hit { position: absolute; inset: -10px; border-radius: 50%; }
.sv-node:active .sv-hit { background: rgba(255,255,255,0.08); }
.sv-num, .sv-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.6); pointer-events: none; }
.sv-ic .i { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.85)); }
.sv-node.is-center .sv-num { font-size: 26px; }
.sv-node.is-center .sv-ic .i { width: 30px; height: 30px; }
.sv-node.is-locked .sv-num, .sv-node.is-locked .sv-ic { opacity: 0.45; }

.sv-labels { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.sv-stars { display: inline-flex; gap: 2px; }
.sv-star { display: inline-flex; }
.sv-star .i { width: 13px; height: 13px; color: rgba(255,255,255,0.22); }
.sv-star.on .i { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255,207,74,0.7)); }
.sv-node.is-center .sv-star .i { width: 15px; height: 15px; }
.sv-node.is-locked .sv-stars { display: none; }

.sv-name { padding: 2px 9px; border-radius: 999px; font-family: var(--display); font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #eef2ff; background: rgba(6,10,26,0.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.sv-name.is-boss { color: #ffe1e8; box-shadow: inset 0 0 0 1px rgba(255,94,126,0.45); }
.sv-node.is-done .sv-name.is-boss { color: #fff3c2; box-shadow: inset 0 0 0 1px rgba(255,207,74,0.5); }
.sv-node.is-locked .sv-name { color: var(--muted); }
.sv-sub { display: inline-flex; align-items: center; gap: 3px; font-family: var(--display); font-size: 11px; font-weight: 600; color: var(--gold); white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.sv-sub .i { width: 11px; height: 11px; }
.sv-node.is-locked .sv-sub { color: var(--muted); }
/* o corpo do centro fica cercado de mundos: rótulo menor e colado nele */
.sv-node.is-center .sv-labels { top: calc(100% + 2px); max-width: 150px; }
.sv-node.is-center .sv-name { font-size: 10.5px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: rgba(4,6,14,0.85); }

.sv-lock { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); background: #141a34; box-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; }
.sv-lock .i { width: 12px; height: 12px; }
.sv-node .lv-dot-ev { left: -2px; top: -2px; }