.studio-mobile-controls { display: none; }

@media (pointer: coarse) {
  html, body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  #scene, #studio-canvas, .studio-mobile-controls, .studio-mobile-controls * { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  /* Festival内Studioの旧Desktop HUDは残すが、Mobile専用ACTIONと二重にしない。 */
  body.studio-active #studio-action-button,
  body.studio-active #studio-interaction-prompt { display: none !important; pointer-events: none; }
  .studio-mobile-controls.is-mobile { position: fixed; inset: 0; z-index: 36; display: block; pointer-events: none; }
  .studio-mobile-action, .studio-mobile-exit, .studio-mobile-joystick { pointer-events: auto; }
  .studio-mobile-exit { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); min-width: 64px; min-height: 48px; padding: 0 14px; border: 1px solid rgba(230, 241, 255, .65); border-radius: 10px; background: rgba(8, 16, 28, .84); color: #edf6ff; font: 750 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; }
  .studio-mobile-exit.is-pressed, .studio-mobile-action.is-pressed { transform: scale(.97); }
  .studio-mobile-orientation { display: none; }
}

@media (pointer: coarse) and (orientation: portrait) {
  .studio-mobile-controls.is-mobile .studio-mobile-orientation { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; padding: 28px; background: rgba(5, 10, 18, .92); color: #edf5ff; text-align: center; pointer-events: none; font: 600 14px/1.5 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; }
  .studio-mobile-orientation strong { font-size: 18px; }
  .studio-mobile-orientation span { color: #aac5df; font-size: 11px; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .studio-mobile-joystick { position: absolute; left: calc(16px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); width: 108px; height: 108px; border: 1px solid rgba(191, 218, 243, .38); border-radius: 50%; background: rgba(8, 16, 28, .48); box-shadow: 0 5px 20px rgba(0, 0, 0, .35), inset 0 0 20px rgba(95, 157, 214, .08); backdrop-filter: blur(4px); }
  .studio-mobile-joystick-ring { position: absolute; inset: 19px; border: 1px solid rgba(220, 238, 255, .22); border-radius: 50%; }
  .studio-mobile-joystick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; background: rgba(216, 236, 255, .88); box-shadow: 0 3px 12px rgba(0, 0, 0, .45); will-change: transform; }
  .studio-mobile-joystick.is-pressed .studio-mobile-joystick-knob { background: #fff; }
  .studio-mobile-action { position: absolute; right: calc(18px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 88px; min-height: 58px; padding: 8px; border: 2px solid rgba(225, 240, 255, .62); border-radius: 999px; background: rgba(26, 74, 109, .86); color: #fff; font: 800 11px/1.15 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; opacity: .52; }
  .studio-mobile-action.is-available { opacity: 1; }
  .studio-mobile-action:disabled { pointer-events: none; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 410px) {
  .studio-mobile-joystick { width: 104px; height: 104px; }
  .studio-mobile-action { width: 82px; min-height: 54px; }
  .studio-mobile-exit { min-height: 48px; }
}