:root {
  color-scheme: dark;
  background: #000000;
  --frame-dark: #312e78;
  --frame-mid: #626262;
  --frame-light: #adadad;
  --focus: #6abfc6;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  background: #000000;
}

#game-shell {
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 12px;
}

#game {
  width: 320px;
  height: 200px;
  max-width: 100%;
  max-height: 100%;
  background: #000000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  border: 2px solid var(--frame-light);
  box-shadow:
    0 0 0 2px var(--frame-mid),
    0 0 0 5px var(--frame-dark),
    0 0 0 7px #000000;
}

#game.soft-pixels {
  image-rendering: auto;
}

#game.crt-enabled {
  box-shadow:
    0 0 0 2px var(--frame-mid),
    0 0 0 5px var(--frame-dark),
    0 0 0 7px #000000,
    0 0 24px rgba(106, 191, 198, 0.18);
}

#game:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--frame-mid), 0 0 0 5px var(--focus), 0 0 0 7px #000000;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* An itch.io 640x400 embed is exactly the game's 2x integer presentation.
   The cartridge frame is already drawn inside the canvas, so at constrained
   embed sizes the decorative outer frame yields every pixel to the game. */
@media (max-width: 640px), (max-height: 400px) {
  #game-shell { padding: 0; }
  #game {
    border: 0;
    box-shadow: none;
  }
  #game.crt-enabled { box-shadow: none; }
}