/* Forge Universe — site + renderers */
:root {
  --fu-bg: #0a0e17;
  --fu-surface: #121a2a;
  --fu-border: #2a3548;
  --fu-text: #e8edf5;
  --fu-muted: #94a3b8;
  --fu-accent: #06b6d4;
  --fu-amber: #f59e0b;
  --fu-perspective: 900px;
}

* { box-sizing: border-box; }

body.fu-body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--fu-bg);
  color: var(--fu-text);
  line-height: 1.5;
}

.fu-header {
  border-bottom: 1px solid var(--fu-border);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.fu-brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--fu-amber);
  text-decoration: none;
}

.fu-nav a {
  color: var(--fu-muted);
  text-decoration: none;
  margin-right: 1rem;
}

.fu-nav a:hover { color: var(--fu-accent); }

.fu-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.fu-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.5rem;
}

.fu-hero p { color: var(--fu-muted); max-width: 42rem; }

.fu-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.fu-card {
  border: 1px solid var(--fu-border);
  border-radius: 4px;
  padding: 1.25rem;
  background: var(--fu-surface);
}

.fu-card a { color: var(--fu-accent); }

.fu-section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fu-muted);
  margin: 1.5rem 0 0.5rem;
}

.fu-demo-mount { min-height: 200px; }

.fu-error { color: #f87171; }

/* 2D projections */
.fu-proj-root { display: flex; flex-direction: column; gap: 0.5rem; }
.fu-proj-svg { border: 1px solid var(--fu-border); border-radius: 4px; max-width: 100%; height: auto; }
.fu-proj-bg { fill: var(--fu-surface); }
.fu-proj-axis { stroke: rgba(148, 163, 184, 0.25); stroke-width: 1; }
.fu-proj-edge { stroke: var(--fu-accent); stroke-width: 2.5; fill: none; }
.fu-proj-sphere { fill: rgba(245, 158, 11, 0.08); stroke: var(--fu-amber); stroke-width: 2.5; }

/* Static solids gallery */
.fu-static-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: radial-gradient(ellipse at center, #1a2234 0%, var(--fu-bg) 70%);
  border: 1px solid var(--fu-border);
  border-radius: 4px;
}

.fu-solid-card {
  border: 1px solid var(--fu-border);
  border-radius: 4px;
  background: var(--fu-surface);
  padding: 0.75rem;
  text-align: center;
}

.fu-solid-card--interactive {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fu-solid-card--interactive:hover,
.fu-solid-card--interactive:focus-visible {
  border-color: var(--fu-accent);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.35);
  outline: none;
}

.fu-solid-card__hint {
  margin: 0.35rem 0 0;
  font-size: 0.7rem;
  color: var(--fu-muted);
  opacity: 0.85;
}

.fu-solid-card__viz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
}

.fu-solid-card__title {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  text-transform: capitalize;
  color: var(--fu-muted);
  font-weight: 600;
}

.fu-css-cube-stage {
  perspective: 500px;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fu-css-cube-stage .fu-css-cube {
  transform: rotateX(-20deg) rotateY(32deg);
}

/* Legacy CSS 3D stage (unused by gallery but kept for reference) */
.fu-css-stage {
  perspective: var(--fu-perspective);
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a2234 0%, var(--fu-bg) 70%);
  border: 1px solid var(--fu-border);
  border-radius: 4px;
  overflow: hidden;
}

.fu-css-world {
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(28deg);
  position: relative;
  width: 1px;
  height: 1px;
}

.fu-css-solid {
  position: absolute;
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.fu-css-cube {
  --fu-size: 50px;
  width: var(--fu-size);
  height: var(--fu-size);
  transform-style: preserve-3d;
  position: relative;
}

.fu-face {
  position: absolute;
  width: var(--fu-size);
  height: var(--fu-size);
  border: 1px solid rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.15);
  backface-visibility: visible;
}

.fu-css-cube .fu-face--front  { transform: translateZ(calc(var(--fu-size) / 2)); }
.fu-css-cube .fu-face--back   { transform: rotateY(180deg) translateZ(calc(var(--fu-size) / 2)); }
.fu-css-cube .fu-face--right  { transform: rotateY(90deg) translateZ(calc(var(--fu-size) / 2)); }
.fu-css-cube .fu-face--left   { transform: rotateY(-90deg) translateZ(calc(var(--fu-size) / 2)); }
.fu-css-cube .fu-face--top    { transform: rotateX(90deg) translateZ(calc(var(--fu-size) / 2)); }
.fu-css-cube .fu-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--fu-size) / 2)); }

.fu-css-sphere {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #67e8f9, #0891b2 55%, #0e7490);
  box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4);
}

.fu-css-cylinder__body {
  width: 40px;
  height: 50px;
  border-radius: 20px / 8px;
  background: linear-gradient(90deg, #0e7490, #06b6d4, #0e7490);
  border: 1px solid rgba(6, 182, 212, 0.5);
}

.fu-css-cone {
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 50px solid rgba(245, 158, 11, 0.7);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.fu-css-pyramid {
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  position: relative;
}

.fu-pyramid-face {
  width: 50px;
  height: 50px;
  background: rgba(148, 163, 184, 0.25);
  border: 1px solid var(--fu-muted);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* WebGL */
.fu-gl-root { position: relative; width: 100%; }
.fu-gl-canvas { width: 100%; height: 480px; display: block; border: 1px solid var(--fu-border); border-radius: 4px; }
.fu-gl-controls { margin-top: 0.75rem; }
.fu-fps-hud {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: monospace;
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  color: var(--fu-accent);
}

.fu-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--fu-border);
  background: var(--fu-surface);
  color: var(--fu-text);
  border-radius: 4px;
  cursor: pointer;
}

.fu-btn--primary {
  border-color: var(--fu-accent);
  color: var(--fu-accent);
}

.fu-btn:hover { background: #1e293b; }

.fu-solid-label {
  position: absolute;
  bottom: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--fu-muted);
  white-space: nowrap;
  text-transform: capitalize;
}

.fu-mini-wf { display: block; }

/* Solid detail flyout */
body.fu-flyout-open { overflow: hidden; }

.fu-flyout[hidden] { display: none; }

.fu-flyout {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.fu-flyout__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 23, 0.72);
  backdrop-filter: blur(4px);
}

.fu-flyout__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  border: 1px solid var(--fu-border);
  border-radius: 6px;
  background: var(--fu-surface);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.fu-flyout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fu-border);
}

.fu-flyout__title {
  margin: 0;
  font-size: 1.25rem;
  text-transform: capitalize;
}

.fu-flyout__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--fu-border);
  border-radius: 4px;
  background: transparent;
  color: var(--fu-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.fu-flyout__close:hover { color: var(--fu-text); border-color: var(--fu-accent); }

.fu-flyout__body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fu-flyout__section-label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fu-muted);
}

.fu-flyout__canvas {
  width: 100%;
  height: 280px;
  display: block;
  border: 1px solid var(--fu-border);
  border-radius: 4px;
}

.fu-flyout__xyz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.fu-axis-panel {
  margin: 0;
  text-align: center;
}

.fu-axis-panel__label {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  color: var(--fu-muted);
}

.fu-axis-panel__svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--fu-border);
  border-radius: 4px;
}

.fu-axis-panel__bg { fill: #0f1624; }
.fu-axis-panel__grid { stroke: rgba(148, 163, 184, 0.2); stroke-width: 1; }

@media (max-width: 560px) {
  .fu-flyout__xyz-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fu-css-world { transform: rotateX(-12deg) rotateY(20deg); }
}

.fu-docs pre {
  background: var(--fu-surface);
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--fu-border);
  border-radius: 4px;
}

.fu-docs {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.fu-docs-nav {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--fu-border);
  border-radius: 4px;
  background: var(--fu-surface);
  font-size: 0.9rem;
}

.fu-docs-nav__heading {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fu-muted);
}

.fu-docs-nav__heading:first-child { margin-top: 0; }

.fu-docs-nav__link {
  color: var(--fu-muted);
  text-decoration: none;
  padding: 0.15rem 0;
}

.fu-docs-nav__link:hover { color: var(--fu-accent); }

.fu-docs-nav__link.fu-docs-nav__active {
  color: var(--fu-accent);
  font-weight: 600;
}

.fu-docs-content { min-width: 0; }

.fu-docs-content h1 { margin-top: 0; font-size: 1.75rem; }

.fu-docs-content h2 {
  margin-top: 1.75rem;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--fu-border);
  padding-bottom: 0.35rem;
}

.fu-docs-content h3 { margin-top: 1.25rem; font-size: 1.05rem; }

.fu-docs-content p,
.fu-docs-content li { color: var(--fu-text); }

.fu-docs-content a { color: var(--fu-accent); }

.fu-docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.fu-docs-content th,
.fu-docs-content td {
  border: 1px solid var(--fu-border);
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.fu-docs-content th {
  background: #0f1624;
  color: var(--fu-muted);
  font-weight: 600;
}

.fu-docs-content pre {
  background: #0f1624;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--fu-border);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.fu-docs-content code {
  color: var(--fu-accent);
  font-size: 0.9em;
}

.fu-docs-content pre code { color: var(--fu-text); }

.fu-docs-content ul { padding-left: 1.25rem; }

@media (max-width: 800px) {
  .fu-docs { grid-template-columns: 1fr; }
  .fu-docs-nav { position: static; }
}

.fu-docs code { color: var(--fu-accent); }