* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  height:100%;
  background:
    radial-gradient(circle at 50% 0%, #2a1a3a 0%, #120a1a 60%, #08040c 100%);
  font-family:'Press Start 2P','VT323',monospace;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  overflow:hidden; touch-action:none; user-select:none;
}
#game-wrap {
  margin-top:8px;
  border:4px solid #4a3560;
  box-shadow:0 0 0 4px #1a0f28, 0 0 30px rgba(120,60,180,.4);
  border-radius:4px; overflow:hidden;
  background:#000;
}
#canvas {
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
#controls {
  display:none;
  width:100%; max-width:800px;
  justify-content:space-between; align-items:center;
  padding:10px 16px; margin-top:6px;
}
#dpad { display:flex; flex-direction:column; align-items:center; gap:4px; }
#dpad .drow { display:flex; gap:4px; }
.db {
  width:52px; height:52px; font-size:18px;
  background:#2e2440; color:#ffd94a; border:3px solid #4a3560;
  border-radius:6px; touch-action:none;
}
.db:active { background:#5a2050; }
#abtns { display:flex; gap:10px; }
.ab {
  width:60px; height:60px; font-size:20px; font-family:'Press Start 2P',monospace;
  background:#5a2050; color:#ffd94a; border:3px solid #7a3070;
  border-radius:50%; touch-action:none;
}
.ab:active { background:#7a3070; }
footer {
  margin-top:8px; font-size:11px; font-family:'VT323',monospace;
}
footer a { color:#b088d0; text-decoration:none; letter-spacing:1px; }
footer a:hover { color:#ffd94a; }
@media (max-width: 860px), (pointer: coarse) {
  #controls { display:flex; }
}
</parameter>
</invoke>