/* GPU Asteroid Swarm — page-specific styles only.
   All base tokens, nav, typography, figures, controls, tables,
   code-tabs, callout, footer, and responsive come from ../examples.css */

/* Fullscreen toggle button on every figure */
.fig-expand-btn {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--text-light); cursor: pointer;
  padding: 0; transition: background .15s, color .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.fig-expand-btn:hover { background: #eef4fb; color: var(--accent); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.fig-expand-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Native fullscreen */
.fig-box:fullscreen {
  background: #fff; padding: 36px 48px; overflow: auto;
  display: flex; flex-direction: column; justify-content: center;
}
.fig-box:fullscreen svg { height: calc(100vh - 160px) !important; max-height: 82vh; }
.fig-box:fullscreen .canvas-wrap,
.fig-box:fullscreen #swarm-canvas { height: calc(100vh - 160px) !important; max-height: 82vh; }
.fig-box:fullscreen figcaption { max-width: 900px; margin-left: auto; margin-right: auto; }

/* CSS fallback for browsers without Fullscreen API */
.fig-box.fig-expanded {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000;
  background: #fff; padding: 36px 48px; overflow: auto; border-radius: 0;
}
.fig-box.fig-expanded svg { height: calc(100vh - 160px) !important; max-height: 82vh; }
.fig-box.fig-expanded #swarm-canvas { height: calc(100vh - 160px) !important; }

/* 3D swarm canvas */
.swarm-box { padding: 0; overflow: hidden; background: #04040e; }
.swarm-box .fig-expand-btn { top: 10px; right: 10px; background: rgba(255,255,255,.88); }
.fig-box:fullscreen.swarm-box,
.fig-box.fig-expanded.swarm-box { background: #04040e; padding: 0; }
.fig-box:fullscreen.swarm-box #swarm-canvas,
.fig-box.fig-expanded.swarm-box #swarm-canvas { height: calc(100vh - 62px) !important; }
.canvas-wrap { position: relative; }
#swarm-canvas {
  width: 100%; height: 580px; display: block;
  border-radius: 8px 8px 0 0; cursor: grab; background: #04040e;
}
#swarm-canvas:active { cursor: grabbing; }
.canvas-controls {
  background: #04040e; border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0 0 8px 8px; padding: 10px 18px;
}
.canvas-controls .controls { color: #aaa; }
.canvas-controls .ctrl label { color: #aaa; }
.canvas-controls input[type=range] { accent-color: #8ab4f8; }
.canvas-controls .val { color: #8ab4f8; }
.canvas-controls input[type=checkbox] { accent-color: #8ab4f8; cursor: pointer; }
.canvas-controls select { background: #0a0a18; color: #cfd8dc; border: 1px solid #222; }
#swarm-hud {
  position: absolute; top: 10px; left: 14px;
  color: rgba(200,220,255,.75); font-family: var(--font-ui); font-size: 12px;
  pointer-events: none; line-height: 1.55; text-shadow: 0 0 4px rgba(0,0,0,.9);
}

@media (max-width: 680px) {
  #swarm-canvas { height: 360px; }
}