/* BUBBLOTL - page styles */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none;
}
#screen {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  display: block; image-rendering: pixelated; image-rendering: crisp-edges;
  cursor: none;
}
body:hover #screen { cursor: default; }

/* ---- touch controls ---- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touch .pad {
  position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 14px; pointer-events: none;
}
#touch .pad.left { left: max(16px, env(safe-area-inset-left)); }
#touch .pad.right { right: max(16px, env(safe-area-inset-right)); }
#touch button {
  pointer-events: auto; touch-action: none;
  width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid rgba(117, 206, 200, 0.55);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22), rgba(40,60,120,0.35) 60%, rgba(10,12,30,0.45));
  color: #d8f7ff; font: 700 13px/1 ui-monospace, "Courier New", monospace; letter-spacing: 1px;
  box-shadow: 0 0 18px rgba(117, 206, 200, 0.18), inset 0 0 10px rgba(255,255,255,0.08);
  -webkit-tap-highlight-color: transparent;
}
#touch button.fire { border-color: rgba(196, 108, 113, 0.7); color: #ffd9e6; }
#touch button.jump { transform: translateY(-34px); }
#touch button.on { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.45), rgba(117,206,200,0.45)); transform: scale(0.94); }
#touch button.jump.on { transform: translateY(-34px) scale(0.94); }
#tpause {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  width: 44px !important; height: 44px !important; font-size: 14px !important;
}
@media (orientation: portrait) {
  #touch button { width: 84px; height: 84px; }
}