/* ============================================================================
   game-perimeter.css — visual layer owned exclusively by perimeter.
   Loaded only on perimeter pages, after site.css / themes.css / games.css, so rules
   here win without touching any shared stylesheet.
   ========================================================================== */

/* The stage is a clockwork orrery viewed from inside: give the canvas a
   machined bezel — keylined state chrome, calm, state-side. */
#stage {
  position: relative;
}
#gamecanvas {
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--obj-line), transparent 35%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 34px color-mix(in oklch, var(--obj), transparent 82%),
    0 14px 40px rgba(0, 0, 0, .5);
}

/* faint orrery vignette over the canvas edges — depth without touching JS */
#stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
      transparent 58%,
      color-mix(in oklch, var(--obj-line), transparent 78%) 100%);
}