/* ------------------------------------------------------------------
   Layout: the stage (HUD + canvas) centred in the window
   ------------------------------------------------------------------ */

.stage {
  --hud-h: 60px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.stage.touch-portrait {
  top: 8px;
  transform: translate(-50%, 0);
}

.viewport {
  position: relative;
  line-height: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 0 7px #3a2670,
    0 18px 50px rgba(0, 0, 0, 0.55);
}

#game {
  display: block;
  image-rendering: auto;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(10, 4, 30, 0.35) 100%);
}