* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #0a0610; color: #eee; overflow: hidden;
  font-family: system-ui, sans-serif; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#wrap {
  position: relative; width: 100vw; height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
}
#game {
  display: block; image-rendering: pixelated; image-rendering: crisp-edges;
  background: #000; outline: none; box-shadow: 0 0 40px rgba(232, 90, 40, 0.18);
  cursor: crosshair;
}
#touch { display: none; }
body.touch-on #touch { display: block; }
body.touch-on #wrap.portrait { flex-direction: column; justify-content: flex-start; padding-top: max(8px, env(safe-area-inset-top)); }

#touch .dpad {
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom));
  width: 136px; height: 136px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0 30%, rgba(255,255,255,0.05) 31% 100%);
  border: 2px solid rgba(255,255,255,0.22); touch-action: none;
}
#touch .dpad span { position: absolute; width: 38px; height: 38px; background: rgba(255,255,255,0.14); border-radius: 8px; }
#touch .dpad .u { left: 49px; top: 6px; } #touch .dpad .d { left: 49px; bottom: 6px; }
#touch .dpad .l { left: 6px; top: 49px; } #touch .dpad .r { right: 6px; top: 49px; }
#touch .dpad[data-dirs~="up"] .u, #touch .dpad[data-dirs~="down"] .d,
#touch .dpad[data-dirs~="left"] .l, #touch .dpad[data-dirs~="right"] .r { background: rgba(255,200,90,0.6); }

#touch .btns {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  width: 190px; height: 150px;
}
#touch button {
  position: absolute; border: 2px solid rgba(255,255,255,0.3); color: #fff; font-weight: 700;
  background: rgba(40,20,30,0.45); border-radius: 50%; font-size: 12px; touch-action: none;
}
#touch button.on { background: rgba(255,170,60,0.65); }
#touch .b-jump { width: 70px; height: 70px; right: 0; bottom: 0; background: rgba(60,120,220,0.45); }
#touch .b-fire { width: 64px; height: 64px; right: 78px; bottom: 12px; background: rgba(220,70,50,0.45); }
#touch .b-dash { width: 56px; height: 56px; right: 10px; bottom: 80px; background: rgba(90,200,120,0.4); }
#touch .b-special { width: 44px; height: 44px; right: 84px; bottom: 88px; }
#touch .topbtns { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 50%; transform: translateX(50%); display: flex; gap: 8px; }
#touch .topbtns button { position: static; border-radius: 10px; width: 58px; height: 30px; font-size: 11px; }
body.touch-on #wrap:not(.portrait) .topbtns { top: 4px; }

#touch-toggle {
  position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.06); color: #ccc; border: 1px solid rgba(255,255,255,0.15);
  font-size: 16px; opacity: 0.5; cursor: pointer;
}
#touch-toggle:hover { opacity: 1; }
body.touch-on #touch-toggle { top: auto; bottom: 170px; right: 10px; }