@media (max-width: 720px) {
  html,
  body {
    min-height: 100dvh;
  }

  .room-wrapper {
    min-height: 100dvh;
    min-height: 100svh;
  }

  .stage {
    width: 100vw !important;
    max-width: 100vw;
    height: 100dvh;
    height: 100svh;
    max-height: none !important;
    aspect-ratio: auto;
  }

  .hotspot {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }

  .hotspot::after {
    display: none;
  }

  .label-bubble {
    bottom: calc(92px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }

  .overlay,
  #musicOverlay,
  .nova-overlay,
  .miko-overlay,
  .sara-overlay {
    align-items: flex-start;
    padding: max(16px, env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card,
  .nova-modal,
  .music-modal,
  .miko-panel {
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 14px 16px 18px;
  }

  .card-close,
  .modal-close,
  .nova-modal-close,
  .miko-close,
  .close-btn {
    min-width: 44px;
    min-height: 44px;
  }

  button,
  .track-btn,
  a {
    touch-action: manipulation;
  }

  .track-btn,
  .action-btn,
  .room-button,
  .mirror-gate-btn {
    min-height: 44px;
  }

  .top-return {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    z-index: 90;
  }

  .top-return a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .control-bar {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 10px;
  }

  .control-bar button {
    min-height: 44px;
  }

  .interface-window-header,
  .card-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .interface-window-header span,
  .card-header h2,
  .card-header h3 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .interface-body {
    align-items: stretch;
    padding: 10px;
  }

  .chat-input {
    flex-wrap: wrap;
  }

  .chat-input input,
  .chat-input button {
    min-height: 44px;
  }
}

@media (max-width: 720px) and (pointer: coarse) {
  .hotspot:hover {
    transform: translate(-50%, -50%);
  }
}