/* HUD 3D viewport frame and what sits in its corners: camera mode toggle,
   connection status, ship cam, Dev Tools (scene/viewRect.js, ui/hud/devTools.js). */
/* The scene renders into this rect on the full-window canvas underneath
   (scene/viewRect.js); the frame itself lets clicks through. */
#viewport{ left:246px; top:83px; right:334px; bottom:11px; pointer-events:none; }
#viewport::after{ content:""; position:absolute; inset:-3px; border-radius:10px;
  border:1px solid #0f1f66; pointer-events:none; }
#viewport > *{ position:absolute; pointer-events:auto; }

#cameraModeToggle{ left:50%; top:10px; width:232px; height:28px; transform:translateX(-50%); }
#cameraModeToggle button{ position:absolute; top:0; height:28px; width:112px;
  font-family:var(--uiFontLabel); font-weight:500; font-size:15.5px; letter-spacing:.3px; color:#0c1440; transition:filter .15s; }
#camModeBaseBtn{ left:0; border-radius:8px 3px 3px 8px; }
#camModeSystemBtn{ left:120px; border-radius:3px 8px 8px 3px; }
#cameraModeToggle button:hover{ filter:brightness(1.12); }
#cameraModeToggle button.camModeActive{ --c:#f8bb56; --hi:#ffda92; --lo:#d38b37; }
#cameraModeToggle button:not(.camModeActive){ --c:#5c6ff1; --hi:#8b9bff; --lo:#4155d6; }

/* RETURN TO BASE (ui/hud/returnBase.js): top-left, styled like the camera toggle */
#returnBaseBtn{ left:12px; top:10px; height:28px; padding:0 16px; border-radius:8px;
  font-family:var(--uiFontLabel); font-weight:500; font-size:15.5px; letter-spacing:.3px; color:#241404; transition:filter .15s; }
#returnBaseBtn:hover{ filter:brightness(1.12); }

/* Orbits/trajectories on/off (scene/linesToggle.js): top-right, same height */
#linesToggleBtn{ right:12px; top:10px; height:28px; padding:0 16px; border-radius:8px;
  font-family:var(--uiFontLabel); font-weight:500; font-size:15.5px; letter-spacing:.3px; color:#0c1440; transition:filter .15s; }
#linesToggleBtn:hover{ filter:brightness(1.12); }
#linesToggleBtn.gold{ color:#241404; }

#connectionStatus{ left:50%; top:46px; transform:translateX(-50%); white-space:nowrap;
  padding:5px 14px; border-radius:6px; border:1.5px solid #e04b50; background:rgb(20 2 6 / .88);
  color:#ff8a8d; font-family:var(--uiFontLabel); font-size:14.5px; letter-spacing:.3px; pointer-events:none; }

/* Ship cam picture-in-picture (scene/shipcam.js renders into this rect). */
#shipCam{ right:12px; top:46px; width:250px; height:168px; pointer-events:none;
  border:1.5px solid #f5bd5c; border-radius:6px; box-shadow:0 0 8px rgb(245 189 92 / .45); }
#shipCamLabel{ position:absolute; left:0; top:0; padding:2px 9px; border-radius:4px 0 7px 0;
  background:rgb(0 2 12 / .82); color:#ffd98f; font-family:var(--uiFontLabel); font-size:13px; letter-spacing:.4px; }
#shipCamCloseBtn{ position:absolute; right:4px; top:4px; width:36px; height:22px; font-size:12px; pointer-events:auto; }

/* Body selection frames (scene/selectionBrackets.js): four thin corner
   marks around each selected body, in client pixels over the 3D view. The
   layer is a direct child of <body> (created in JS) — inside the scaled
   HUD a fixed element would be positioned and scaled by the HUD's
   transform — clipped to the view rect set from JS, under the HUD panels. */
#selectionBrackets{ position:fixed; overflow:hidden; pointer-events:none; z-index:1; }
.selBracket{ position:absolute; display:none; --arm:12px; }
.selBracket i{ position:absolute; width:var(--arm); height:var(--arm);
  border:0 solid rgb(238 241 255 / .92); filter:drop-shadow(0 0 1px rgb(0 0 0 / .8)); }
.selBracket .tl{ left:0; top:0; border-left-width:1px; border-top-width:1px; }
.selBracket .tr{ right:0; top:0; border-right-width:1px; border-top-width:1px; }
.selBracket .bl{ left:0; bottom:0; border-left-width:1px; border-bottom-width:1px; }
.selBracket .br{ right:0; bottom:0; border-right-width:1px; border-bottom-width:1px; }

/* Dev Tools: small button in the viewport's bottom-right corner + its menu. */
/* Dev Tools -> Performance stats (ui/hud/perfStats.js), top-left corner. */
#perfStats{ left:12px; top:12px; width:244px; padding:8px 10px 6px; border-radius:8px; pointer-events:none;
  background:rgb(0 2 12 / .82); border:1.5px solid var(--uiFrame); box-shadow:0 0 8px var(--uiFrameGlow);
  font-family:var(--uiFontLabel); font-size:13px; letter-spacing:.2px; color:#aab6ff; }
#perfStatsText > div{ display:flex; justify-content:space-between; gap:10px; line-height:1.45; white-space:nowrap; }
#perfStatsText b{ color:#ffe2a8; font-weight:500; }
#perfStatsGraph{ display:block; width:224px; height:44px; margin-top:5px; border-top:1px solid #1d2c7a; }
#devToolsBtn{ right:12px; bottom:12px; width:40px; height:36px; display:flex; align-items:center; justify-content:center; }
#devToolsBtn svg{ width:22px; height:22px; }
#devToolsMenu{ right:12px; bottom:56px; padding:10px 14px 4px; border-radius:10px;
  background:rgb(0 2 12 / .92); border:1.5px solid var(--uiFrame); box-shadow:0 0 8px var(--uiFrameGlow); }
#devToolsMenu .setupCheckRow{ display:flex; align-items:center; gap:10px; margin:0 0 8px; white-space:nowrap;
  font-size:15px; color:#c7d0ff; cursor:pointer; }
#devToolsMenu .setupCheckRow input{ position:absolute; opacity:0; pointer-events:none; }
#devToolsMenu .chk{ width:40px; height:22px; border-radius:4px 11px 11px 4px; border:1.5px solid #3c55d8;
  background:#030820; position:relative; flex:none; transition:border-color .15s; }
#devToolsMenu .chk::after{ content:""; position:absolute; left:3px; top:3px; width:13px; height:13px; border-radius:3px;
  background:#2a3c96; transition:left .15s, background .15s; }
#devToolsMenu input:checked + .chk{ border-color:#f5bd5c; }
#devToolsMenu input:checked + .chk::after{ left:21px; background:linear-gradient(180deg,#ffda92,#f8bb56 55%,#d38b37); }
#devToolsMenu input:focus-visible + .chk{ box-shadow:0 0 0 2px #6f86ff; }
#devToolsMenu .devHd{ margin:4px 0 6px; padding-top:8px; border-top:1px solid #2c4bd8; font-family:var(--uiFontLabel);
  font-size:14px; letter-spacing:.8px; color:#96a8ff; }
#devLabs{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
#devLabs button{ display:flex; align-items:center; gap:9px; height:28px; padding:0 10px; cursor:pointer; text-align:left;
  border:1.5px solid #3c55d8; border-radius:4px 14px 14px 4px; background:linear-gradient(180deg,#050a24,#00020c);
  font-family:var(--uiFontLabel); font-size:14px; letter-spacing:.5px; color:#e6ebff; transition:border-color .15s, box-shadow .15s; }
#devLabs button:hover{ border-color:#f5bd5c; box-shadow:0 0 8px rgb(245 189 92 / .4); color:#ffe2a8; }
#devLabs svg{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }