:root { --amber: #ffcc55; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0c0c14; color: #ddd;
  font-family: "Courier New", monospace;
  display: flex; min-height: 100vh; align-items: center; justify-content: center;
}
#wrap { text-align: center; }
#frame {
  position: relative; display: inline-block;
  border: 4px solid #2a2a3a; border-radius: 6px;
  box-shadow: 0 0 40px #000a; background: #000;
}
canvas#game {
  display: block; width: min(96vw, 1280px);
  image-rendering: pixelated; image-rendering: crisp-edges;
  aspect-ratio: 320/242; height: auto; background: #000;
}
.screen {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(4, 4, 12, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6em; padding: 1em;
}
.screen.hidden { display: none; }
h1 { color: var(--amber); letter-spacing: .15em; font-size: 2.2em; }
h1 span { color: #eee; font-size: .5em; }
h2 { color: var(--amber); letter-spacing: .3em; }
.sub { color: #9ab; font-size: .8em; line-height: 1.5; }
.keys { color: #789; font-size: .72em; line-height: 1.7; }
#menu { display: grid; gap: .25em; margin: .6em 0; }
#menu .opt {
  cursor: pointer; padding: .15em 1em; color: #cda; font-size: .85em;
  border: 1px solid transparent;
}
#menu .opt b { color: var(--amber); display: inline-block; min-width: 21em; text-align: right; margin-right: 1em; }
#menu .opt.sel { border-color: var(--amber); background: #221a06; }
#start {
  font: inherit; font-size: 1em; letter-spacing: .2em; cursor: pointer;
  color: #100; background: var(--amber); border: 0; padding: .45em 2.4em;
}
#start:hover { filter: brightness(1.15); }
#foot { color: #556; font-size: .7em; margin-top: .6em; }