* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { 
  width: 100%; height: 100%; 
  overflow: hidden; 
  background: #0a0006;
  font-family: 'Press Start 2P', monospace;
}
#canvas { 
  display: block; 
  width: 100%; 
  height: 100%;
  image-rendering: pixelated;
}
footer {
  position: fixed;
  bottom: 4px;
  right: 10px;
  z-index: 100;
}
footer a {
  color: #663322;
  font-size: 10px;
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
}
footer a:hover { color: #ff6633; }

#mobile-controls {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 50;
}
#mobile-left, #mobile-right {
  position: absolute;
  bottom: 20px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
#mobile-left { left: 15px; align-items: flex-end; }
#mobile-right { right: 15px; align-items: flex-end; }
.ctrl-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,100,50,0.6);
  background: rgba(30,5,5,0.7);
  color: #ff8844;
  font-size: 20px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.ctrl-btn:active { background: rgba(200,50,20,0.5); }
.ctrl-jump { margin-bottom: 10px; }
.atk-btn { font-size: 16px; }

@media (max-width: 768px), (pointer: coarse) {
  #mobile-controls { display: flex; }
  footer { bottom: 150px; }
}