/* Mobile C03 artwork and user-marked hotspot layout. */
.scene-background--mobile,
.mobile-machine-hotspots {
  display: none;
}

@media (max-width: 760px) {
  body {
    padding-bottom: 0;
  }

  .fc-room-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 20 !important;
    transform: translateX(-50%) !important;
  }

  .arcade-view,
  .scene-stage {
    min-height: calc(100dvh - var(--header-height));
  }

  .fc-fullscreen-button,
  .scene-toolbar,
  .rotate-note,
  .scene-background--desktop,
  .machine-hotspot--prism,
  .machine-hotspot--rhythm,
  .scene-nav--ticket,
  .scene-nav--karaoke {
    display: none !important;
  }

  .scene-frame {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 20 !important;
    overflow: hidden;
  }

  .scene-background--mobile {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #arcade-scene .scene-background--desktop {
    display: none !important;
  }

  .mobile-machine-hotspots {
    display: block;
    position: absolute;
    z-index: 12;
    inset: 0;
    pointer-events: none;
  }

  .mobile-machine-hotspot {
    position: absolute;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8%;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-machine-hotspot::after {
    content: "";
    position: absolute;
    inset: 4%;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }

  .mobile-machine-hotspot:focus-visible::after,
  .mobile-machine-hotspot:active::after,
  .show-targets .mobile-machine-hotspot::after {
    border-color: rgba(54, 221, 255, .95);
    background: rgba(54, 221, 255, .08);
    box-shadow: 0 0 22px rgba(54, 221, 255, .65), inset 0 0 26px rgba(54, 221, 255, .08);
  }

  .mobile-machine-hotspot--prism { left: 5.5%; top: 13.8%; width: 89%; height: 23.2%; }
  .mobile-machine-hotspot--rhythm { left: 1.5%; top: 40.2%; width: 32.7%; height: 23.1%; }
  .mobile-machine-hotspot--skee { left: 35.4%; top: 40.2%; width: 30%; height: 23.1%; }
  .mobile-machine-hotspot--basketball { left: 66.2%; top: 40.2%; width: 32.3%; height: 23.1%; }
  .mobile-machine-hotspot--shooter { left: 1.5%; top: 63.6%; width: 32.7%; height: 19.1%; }
  .mobile-machine-hotspot--cabinet-center { left: 35.4%; top: 63.6%; width: 30%; height: 19.1%; }
  .mobile-machine-hotspot--cabinet-right { left: 66.2%; top: 63.6%; width: 32.3%; height: 19.1%; }
  .mobile-machine-hotspot--ticket { left: 1.5%; top: 83.2%; width: 46.2%; height: 10.2%; }
  .mobile-machine-hotspot--karaoke { left: 48%; top: 83.2%; width: 50.5%; height: 10.2%; }

  .mobile-dock {
    right: auto;
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(calc(100vw - 16px), calc((100dvh - var(--header-height)) * 9 / 20 - 12px));
    height: clamp(54px, 7.2dvh, 64px);
    transform: translateX(-50%);
    border-color: rgba(255, 190, 46, .42);
    background: rgba(20, 10, 41, .86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-machine-hotspot::after {
    transition: none;
  }
}