:root {
  color-scheme: dark;
  --case: #181818;
  --case-edge: #3a3a3a;
  --screen: #070709;
  --red: #ff335f;
  --cyan: #32e7ff;
  --yellow: #ffe45c;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 236, 92, 0.16), transparent 26rem),
    linear-gradient(135deg, #101820, #211527 48%, #111518);
  font-family: Consolas, "Courier New", monospace;
}

.cabinet {
  width: min(100vw, 1120px);
  padding: clamp(10px, 2.4vw, 26px);
}

.bezel {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 620;
  padding: clamp(8px, 1.4vw, 16px);
  border: 2px solid var(--case-edge);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 7%),
    linear-gradient(135deg, #2b2b2b, var(--case));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.52),
    inset 0 0 0 2px rgba(255, 255, 255, 0.045),
    inset 0 -16px 28px rgba(0, 0, 0, 0.28);
}

.bezel::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.4vw, 16px);
  pointer-events: none;
  border-radius: 5px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 50%, rgba(0, 0, 0, 0.08) 50%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.22));
  background-size: 100% 4px, 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.42;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  image-rendering: pixelated;
  background: var(--screen);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 60px rgba(0, 0, 0, 0.5);
  touch-action: none;
}

@media (max-aspect-ratio: 960 / 620) {
  .cabinet {
    width: 100vw;
  }
}