/* Touch UI leaves the centre of the world open for looking around. */
#touch-controls { position: fixed; inset: 0; z-index: 3; pointer-events: none; user-select: none; -webkit-user-select: none; }
#touch-joystick, .touch-action { pointer-events: auto; touch-action: none; -webkit-touch-callout: none; border: 1px solid #e6d2ab8c; background: #282434bb; color: #f5e8d3; box-shadow: 0 3px 14px #10111f55; }
#touch-joystick { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle, #d1b78d15 0 35%, #282434bb 36%); }
#touch-joystick::before, #touch-joystick::after { content: ''; position: absolute; background: #e6d2ab30; pointer-events: none; }
#touch-joystick::before { left: 20%; right: 20%; top: 50%; height: 1px; }
#touch-joystick::after { top: 20%; bottom: 20%; left: 50%; width: 1px; }
.touch-thumb { position: absolute; top: calc(50% - 22px); left: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; background: #dac097bc; border: 2px solid #f4e3c4b0; box-shadow: 0 2px 8px #15111d77; z-index: 1; pointer-events: none; }
.touch-move-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font: 700 9px/1.4 'Trebuchet MS', Arial, sans-serif; letter-spacing: .16em; color: #eee1cdbb; text-shadow: 0 1px 3px #111; }
.touch-actions { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 62px 62px; gap: 10px; }
.touch-action { width: 62px; height: 62px; padding: 0; border-radius: 50%; font: 700 11px/1 'Trebuchet MS', Arial, sans-serif; }
.touch-jump { background: #d9bd8ee8; color: #272233; border: 2px solid #f7e2b7; font-size: 13px; }
.touch-action.is-pressed { background: #f0d7a8; color: #242033; transform: scale(.94); box-shadow: 0 0 16px #e4ba7750; }
#touch-joystick.is-pressed { border-color: #ffe2a7; }
.touch-controls-active #app canvas { touch-action: none; }
.touch-controls-active .hud-corner { bottom: calc(175px + env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); gap: 12px; }
.touch-controls-active .hud-corner kbd { display: none; }
.touch-controls-active .haunted-location { top: max(96px, calc(78px + env(safe-area-inset-top))); bottom: auto; left: max(20px, env(safe-area-inset-left)); max-width: 160px; gap: 2px; padding-left: 10px; }
.touch-controls-active .haunted-name { font-size: 1.25rem; }
.touch-controls-active #haunted-region { font-size: .8rem; }
.touch-controls-active .haunted-eyebrow, .touch-controls-active .haunted-hint, .touch-controls-active .candy-location, .touch-controls-active .candy-help { display: none; }
.touch-controls-active:has(.charge-meter:not([hidden])) .haunted-location { visibility: hidden; }
@media (max-width: 370px), (max-height: 430px) {
  #touch-joystick { width: 112px; height: 112px; left: max(16px, env(safe-area-inset-left)); }
  .touch-actions { grid-template-columns: 56px 56px; gap: 8px; right: max(16px, env(safe-area-inset-right)); }
  .touch-action { width: 56px; height: 56px; }
  .touch-controls-active .hud-corner { bottom: calc(154px + env(safe-area-inset-bottom)); }
  .touch-controls-active .haunted-location { max-width: 132px; }
}