:root {
  --bg: #1d1b4f;
  --fg: #c8c6ff;
  --accent: #edf171;
  --panel: rgba(0, 0, 0, 0.85);
}
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.4 ui-monospace, Menlo, Consolas, monospace;
}
main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
canvas {
  display: block;
  background: #000;
  image-rendering: pixelated;
  max-width: 100%;
  outline: none;
}
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--panel);
}
#overlay[hidden], [hidden] { display: none !important; }
h1 { color: var(--accent); letter-spacing: 0.2em; margin: 0; }
.sub { margin-top: 0; letter-spacing: 0.4em; }
button {
  font: inherit;
  margin: 6px;
  padding: 8px 16px;
  color: #000;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
#menu { display: flex; flex-direction: column; }
button:focus-visible, button:focus { outline: 3px solid #fff; outline-offset: 2px; }
#link { font: inherit; width: min(28em, 80vw); padding: 6px; }
#banner {
  position: absolute;
  top: 16px;
  padding: 6px 12px;
  background: #813338;
  color: #fff;
}
#help { font-size: 13px; opacity: 0.7; text-align: center; }
#problemtext { max-width: 32em; padding: 0 16px; }