:root {
  --bg: #f4f4f0;
  --fg: #222;
  --muted: #777;
  --frame: #222;
  --kbd-bg: #fff;
  --accent: #e8973a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14141a; --fg: #e8e8e8; --muted: #9a9a9a; --frame: #e8e8e8; --kbd-bg: #222; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.9;
  padding: 24px 16px 40px;
}
main { max-width: 620px; margin: 0 auto; }

h1 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--accent);
  text-shadow: 3px 3px 0 rgba(0,0,0,.15);
}
.sub { margin: 0 0 20px; color: var(--muted); }

.frame {
  border: 3px solid var(--frame);
  box-shadow: 6px 6px 0 var(--frame);
  background: #fff;
  line-height: 0;
}
canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: manipulation;
  outline: none;
}

.touch { display: none; gap: 12px; margin-top: 18px; }
.touch button {
  flex: 1;
  font: inherit;
  padding: 18px 8px;
  border: 3px solid var(--frame);
  background: var(--kbd-bg);
  color: var(--fg);
  box-shadow: 4px 4px 0 var(--frame);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.touch button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--frame); }
@media (pointer: coarse) { .touch { display: flex; } }

.controls { list-style: none; padding: 0; margin: 24px 0 0; color: var(--muted); }
.controls li { margin: 6px 0; }
kbd {
  font: inherit;
  background: var(--kbd-bg);
  border: 2px solid var(--frame);
  padding: 1px 6px;
  color: var(--fg);
}

footer { margin-top: 32px; color: var(--muted); font-size: 9px; }