/* Fitting add-on fitting-3d.js: 3D ship canvas in the inner ring (slots, arcs and the powergrid readout stay on top),
   Skins glass button next to Nanocore / Implants and the skin strip under the stage footer. */
.fit-ring canvas.ss3d { position: absolute; inset: 15cqi; width: 70cqi; height: 70cqi; border-radius: 50%; touch-action: none;
  cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.fit-ring canvas.ss3d:active { cursor: grabbing; }
.fit-ring canvas.ss3d[hidden] { display: none; }
.fit-ring.ss3d-on .fit-shipimg { visibility: hidden; }
.fit-ring .ss3d-reset { position: absolute; left: calc(50% + 21cqi); top: calc(50% + 21cqi); width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--on-space, #fff); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.26); border-radius: 50%; cursor: pointer; }
.fit-ring .ss3d-reset:hover { background: rgba(255,255,255,.18); }
.fit-ring .ss3d-reset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fit-ring .ss3d-reset[hidden] { display: none; }
.fit-ring .ss3d-reset svg { width: 18px; height: 18px; }
.ss3d-skinbtn[hidden], .ss3d-skins[hidden] { display: none; }
.ss3d-skinico { width: 22px; height: 22px; margin-left: 4px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: conic-gradient(#9fb2c6 0 33%, #c8a465 0 66%, #4f5d6c 0); }
.fit-stagefoot .fit-corewrap { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ss3d-skins { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 10px 2px 4px; margin: 0 -2px;
  scrollbar-width: thin; }
.ss3d-skin { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px;
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--on-space, #fff); text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; cursor: pointer; }
.ss3d-skin:hover { background: rgba(255,255,255,.12); }
.ss3d-skin[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 1px #fff; background: rgba(255,255,255,.14); }
.ss3d-skin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ss3d-skin img, .ss3d-skin .ss3d-noimg { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: rgba(0,0,0,.25); }
.ss3d-skin-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }