/* Dungeon Prince — mobile PWA platformer (original homage). */
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #07060a;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
#dp-root {
  position: fixed; inset: 0;
  background: #07060a;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Courier New", ui-monospace, monospace;
}
#dp-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
/* ---- touch controls ---- */
#dp-touch { position: absolute; inset: 0; pointer-events: none; display: none; }
#dp-touch.dp-visible { display: block; }
.dp-btn {
  position: absolute;
  pointer-events: auto;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255, 240, 210, 0.10);
  border: 2px solid rgba(255, 240, 210, 0.28);
  color: rgba(255, 240, 210, 0.85);
  font-size: 22px; line-height: 58px; text-align: center;
  box-sizing: border-box;
  touch-action: none;
}
.dp-btn.dp-down { background: rgba(255, 220, 130, 0.30); border-color: rgba(255, 220, 130, 0.7); }
.dp-btn.dp-big { width: 76px; height: 76px; line-height: 72px; font-size: 26px; }
#dp-b-left  { left:  calc(14px + env(safe-area-inset-left));  bottom: calc(24px + env(safe-area-inset-bottom)); }
#dp-b-right { left:  calc(92px + env(safe-area-inset-left));  bottom: calc(24px + env(safe-area-inset-bottom)); }
#dp-b-down  { right: calc(102px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
#dp-b-jump  { right: calc(14px + env(safe-area-inset-right));  bottom: calc(64px + env(safe-area-inset-bottom)); }
#dp-b-atk   { right: calc(96px + env(safe-area-inset-right));  bottom: calc(92px + env(safe-area-inset-bottom)); }
/* ---- system buttons (pause / mute) ---- */
.dp-sys {
  position: absolute;
  pointer-events: auto;
  top: calc(34px + env(safe-area-inset-top)); /* below the canvas HUD score line */
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255, 240, 210, 0.08);
  border: 1px solid rgba(255, 240, 210, 0.22);
  color: rgba(255, 240, 210, 0.75);
  font-size: 15px; line-height: 32px; text-align: center;
  box-sizing: border-box;
  touch-action: none;
  display: none;
}
.dp-sys.dp-visible { display: block; }
#dp-b-pause { right: calc(10px + env(safe-area-inset-right)); }
#dp-b-mute  { right: calc(52px + env(safe-area-inset-right)); }