:root {
  /* Shared CRT stage defaults derived from Pac-Man */
  --screen-width: min(92vw, 896px);
  --screen-aspect: 224 / 248;
  --screen-padding: clamp(8px, 1.6vw, 18px);
  --screen-bg: #020409;
  --screen-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.8) inset,
    0 0 24px 8px rgba(0, 140, 255, 0.15),
    0 0 100px rgba(0, 140, 255, 0.1);
  --screen-body-bg: radial-gradient(circle at 50% 20%, #06080d 0, #05060a 35%, #03050a 100%);
  --screen-text: #f7f1c7;
  --screen-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --crt-glow-shadow: inset 0 0 80px rgba(0, 140, 255, 0.15);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--screen-body-bg);
  color: var(--screen-text);
  font-family: var(--screen-font);
}

.screen {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--screen-width);
  aspect-ratio: var(--screen-aspect);
  padding: var(--screen-padding);
  background: var(--screen-bg);
  border-radius: var(--crt-radius, 12px);
  box-shadow: var(--screen-shadow);
  filter: saturate(var(--screen-saturate, 1)) contrast(var(--screen-contrast, 1));
}

.screen canvas,
.screen [data-screen-canvas="true"] {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: inherit;
  filter: saturate(var(--screen-canvas-saturate, 1.1)) contrast(var(--screen-canvas-contrast, 1.05));
}

.screen .crt-overlay,
.screen .crt-glow,
.screen .retro-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen .retro-hud {
  pointer-events: auto;
}

.screen .crt-glow {
  box-shadow: var(--crt-glow-shadow);
}