@font-face { font-family: "Dela"; src: url(../assets/fonts/dela-subset.woff2) format("woff2"); font-display: swap; }
html, body {
  margin: 0; height: 100%; background: #08050f; 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; }
#game { display: block; image-rendering: auto; background: #120a1e; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
#touch { position: absolute; inset: 0; touch-action: none; }
#touch[hidden] { display: none; }
#touch .pad { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 14px; pointer-events: none; }
#touch .pad.left { left: max(14px, env(safe-area-inset-left)); }
#touch .pad.right { right: max(14px, env(safe-area-inset-right)); align-items: flex-end; }
#touch .btn {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.92); font: 400 26px "Dela", "Yu Gothic UI", "Hiragino Sans", sans-serif;
  background: rgba(255, 255, 255, 0.13); border: 2px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box; pointer-events: none;
}
#touch .btn small { font-size: 10px; font-weight: 700; opacity: 0.8; }
#touch .btn.jump { width: 88px; height: 88px; background: rgba(230, 70, 60, 0.28); border-color: rgba(255, 150, 130, 0.6); }
#touch .btn.act { margin-bottom: 40px; background: rgba(250, 220, 120, 0.18); }
#touch .btn.on { background: rgba(255, 255, 255, 0.4); }
#touch .btn.pause { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 44px; height: 44px; font-size: 18px; }
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: block; position: absolute; top: 12%; left: 0; right: 0; text-align: center;
    color: #ffe0a0; font: 400 18px "Dela", "Yu Gothic UI", "Hiragino Sans", sans-serif; text-shadow: 0 2px 6px #000; pointer-events: none;
  }
}