/* 3D worlds: the WebGL canvas under the game canvas, and the on-screen controls (js/three-kit.js). */
.gl3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gl3d[hidden] { display: none; }
.world3d-canvas { touch-action: none; cursor: grab; }
.world3d-canvas:active { cursor: grabbing; }
.pad3d { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pad3d[hidden] { display: none; }
.pad3d button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad3d-pause { position: absolute; top: 12px; right: 14px; }
.pad3d-btn { position: absolute; display: grid; place-items: center; border-radius: 50%; border: 3px solid #1a1540; box-shadow: 0 4px 0 #1a1540, 0 0 0 2px #fff8e633 inset; font: 400 11px var(--font-display); letter-spacing: .04em; color: var(--night); cursor: pointer; opacity: .9; }
.pad3d-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a1540; }
.pad3d-jump { right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(26px, env(safe-area-inset-bottom, 0px)); width: 84px; height: 84px; background: var(--signal); }
.pad3d-action { right: calc(max(18px, env(safe-area-inset-right, 0px)) + 96px); bottom: max(40px, env(safe-area-inset-bottom, 0px)); width: 66px; height: 66px; background: var(--spark); }
@media (max-height: 500px) and (orientation: landscape) {
  .pad3d-jump { width: 70px; height: 70px; bottom: 14px; }
  .pad3d-action { width: 56px; height: 56px; bottom: 24px; right: calc(max(18px, env(safe-area-inset-right, 0px)) + 80px); }
}