:root {
  --bg: #07080f;
  --pad: rgba(255, 255, 255, 0.14);
  --pad-on: rgba(255, 220, 90, 0.55);
  --pad-text: rgba(255, 255, 255, 0.85);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
#wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.portrait #wrap { align-items: flex-start; padding-top: 10px; }
#screen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  box-shadow: 0 0 0 2px #1b1e2e, 0 12px 60px rgba(0, 0, 0, 0.6);
}

/* ---------- touch pad ---------- */
#touchpad { display: none; }
body.touch #touchpad { display: block; }
#touchpad button {
  position: fixed;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: var(--pad);
  color: var(--pad-text);
  font: bold 16px/1 sans-serif;
  border-radius: 50%;
  touch-action: none;
}
#touchpad button.on { background: var(--pad-on); }
#touchpad .dpad button { width: 58px; height: 58px; border-radius: 12px; }
#touchpad .dpad .up    { left: 76px;  bottom: 150px; }
#touchpad .dpad .down  { left: 76px;  bottom: 30px; }
#touchpad .dpad .left  { left: 16px;  bottom: 90px; }
#touchpad .dpad .right { left: 136px; bottom: 90px; }
#touchpad .ab .a { right: 20px;  bottom: 100px; width: 76px; height: 76px; font-size: 22px; }
#touchpad .ab .b { right: 108px; bottom: 50px;  width: 68px; height: 68px; font-size: 20px; }
#touchpad .start {
  left: 50%; transform: translateX(-50%); bottom: 14px;
  width: 92px; height: 32px; border-radius: 16px; font-size: 13px;
}