/**
 * main.css — Theme variables, layout and degraded-fallback styles.
 * Green sci-fi palette is centralized via CSS Custom Properties (FR-002).
 * Static resource paths are decoupled under /res (FR-006).
 */

:root {
  /* Morandi green palette (FR-002) */
  --color-primary: #8ba888;
  --color-secondary: #a3b8a0;
  --color-background: #2c3330;

  /* Layout */
  --stage-size: 100vmin;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-background);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-primary);
}

@supports not (display: grid) {
  /* Flexbox fallback for browsers without Grid (FR-007) */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.stage {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
}

.stage__canvas {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
}

/* Progressive enhancement: when JS/Canvas is unavailable, show a CSS gradient
   sci-fi background (NFR-003, EC-007). */
.no-canvas-fallback .stage__canvas,
.no-js .stage__canvas {
  background:
    radial-gradient(circle at 20% 30%, rgba(139, 168, 136, 0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(163, 184, 160, 0.06), transparent 45%),
    linear-gradient(135deg, #3a4239 0%, #4d5a4a 40%, #2c3330 100%);
}