:root {
  --amber: #FBBB50;
  --slate: #3C4A5C;
  --leaf: #4fb36b;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  background: var(--slate);
  color: var(--amber);
  font-family: "Courier New", Courier, monospace;
  display: flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
main { width: 100%; max-width: 840px; padding: 16px; text-align: center; }
h1 { margin: 0; line-height: 0; }
h1 canvas { width: 100%; max-width: 480px; height: auto; image-rendering: pixelated; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.domain { margin: 12px 0 16px; font-size: .95rem; color: var(--amber); letter-spacing: .12em; }
.game-wrap { border: 4px solid var(--amber); box-shadow: 6px 6px 0 #000a; background: var(--slate); }
canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.hint { font-size: .8rem; opacity: .75; margin: 14px 0 0; }
footer { margin-top: 28px; font-size: .7rem; opacity: .6; }
footer a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--amber); }
footer a:hover, footer a:focus-visible { opacity: 1; border-bottom-style: solid; }