/* v31: shared device compatibility layer for tablets, phones, and old iPad stable mode. */
.pml-device-notice {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 14px;
  border: 1px solid rgba(33, 145, 155, 0.24);
  border-radius: 16px;
  background: rgba(248, 254, 253, 0.92);
  box-shadow: 0 18px 44px rgba(19, 55, 67, 0.18);
  color: #102235;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.pml-device-notice strong {
  flex: 0 0 auto;
  color: #168690;
  font-size: 15px;
}

.pml-device-notice span {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.45;
}

.pml-device-notice button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #1f8b94;
  color: #fff;
  font-weight: 800;
}

.pml-device-notice.is-hidden {
  display: none;
}

.pml-stable-mode .stage-vignette,
.pml-stable-mode .stage-shade {
  opacity: 0.5;
}

.pml-stable-mode .feedback-pill,
.pml-stable-mode .action-cue,
.pml-stable-mode .guide-card,
.pml-stable-mode .status-card,
.pml-stable-mode .practice-card,
.pml-stable-mode .lesson-video,
.pml-stable-mode .performance-card,
.pml-stable-mode .analysis-card {
  box-shadow: 0 10px 24px rgba(18, 49, 60, 0.12) !important;
}

.pml-stable-mode .spark,
.pml-stable-mode .particle,
.pml-stable-mode .bubble,
.pml-stable-mode .coin-burst,
.pml-stable-mode .star-burst,
.pml-stable-mode .ambient-orb,
.pml-stable-mode .floating-note {
  display: none !important;
}

.pml-stable-mode * {
  scroll-behavior: auto !important;
}

.pml-device-tablet body,
.pml-device-phone body {
  min-height: 100svh;
}

/* mobileHomeScroll v44: allow normal content pages to scroll in phone, tablet, and WeChat browsers. */
.pml-device-tablet body.home-active,
.pml-device-tablet body.product-active,
.pml-device-tablet body.about-active,
.pml-device-tablet body.agreement-active,
.pml-device-phone body.home-active,
.pml-device-phone body.product-active,
.pml-device-phone body.about-active,
.pml-device-phone body.agreement-active {
  height: auto !important;
  min-height: 100svh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.pml-device-tablet .home-screen,
.pml-device-phone .home-screen,
.pml-device-tablet .product-info-screen,
.pml-device-phone .product-info-screen,
.pml-device-tablet .about-info-screen,
.pml-device-phone .about-info-screen,
.pml-device-tablet .agreement-screen,
.pml-device-phone .agreement-screen {
  height: auto !important;
  min-height: 100svh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.pml-device-phone .home-content,
.pml-device-tablet .home-content {
  width: min(100%, 1100px);
}

.pml-device-phone .home-actions,
.pml-device-phone .product-info-grid,
.pml-device-phone .performance-workspace-grid,
.pml-device-phone .analysis-workspace-grid,
.pml-device-phone .performance-upload-grid,
.pml-device-phone .performance-result-grid {
  grid-template-columns: 1fr !important;
}

.pml-device-phone .home-screen,
.pml-device-phone .app-shell,
.pml-device-phone .workspace-shell,
.pml-device-phone .page-shell {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

.pml-device-phone .home-content h1,
.pml-device-phone .hero h1,
.pml-device-phone .section-heading h2 {
  font-size: clamp(42px, 15vw, 76px) !important;
  line-height: 0.98;
}

.pml-device-phone .topbar,
.pml-device-tablet .topbar {
  gap: 10px;
}

.pml-device-phone .nav-links,
.pml-device-tablet .nav-links {
  overflow-x: auto;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
}

.pml-device-phone .content-grid,
.pml-device-tablet .content-grid {
  grid-template-columns: 1fr !important;
}

.pml-device-phone .video-layout,
.pml-device-tablet .video-layout {
  align-items: stretch;
}

.pml-device-phone .practice-card,
.pml-device-tablet .practice-card {
  grid-template-columns: 1fr !important;
}

.pml-device-phone .clip-modal-card,
.pml-device-tablet .clip-modal-card {
  width: min(96vw, 980px);
  max-height: 88svh;
}

.pml-game-surface.pml-device-tablet .topbar,
.pml-game-surface.pml-device-phone .topbar {
  grid-template-columns: 1fr !important;
  align-items: stretch;
}

.pml-game-surface.pml-device-tablet .status-grid,
.pml-game-surface.pml-device-phone .status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}

.pml-game-surface.pml-device-tablet .status-card,
.pml-game-surface.pml-device-phone .status-card {
  min-width: 0;
  padding: 10px;
}

.pml-game-surface.pml-device-tablet .status-card strong,
.pml-game-surface.pml-device-phone .status-card strong {
  font-size: clamp(18px, 4vw, 28px);
}

.pml-game-surface.pml-device-tablet .stage,
.pml-game-surface.pml-device-phone .stage,
.pml-game-surface.pml-device-tablet .stage-card,
.pml-game-surface.pml-device-phone .stage-card {
  min-height: min(70svh, 760px);
}

.pml-game-surface.pml-device-phone.pml-orientation-portrait .orientation-lock {
  display: flex !important;
}

.pml-game-surface.pml-device-tablet.pml-orientation-landscape .orientation-lock,
.pml-game-surface.pml-device-desktop .orientation-lock {
  display: none !important;
}

.pml-game-surface.pml-device-phone.pml-orientation-landscape .guide-card:not(.sync-guide-card),
.pml-game-surface.pml-device-tablet.pml-stable-mode .guide-card:not(.sync-guide-card) {
  max-width: 280px;
}

.pml-game-surface .guide-overlay,
.pml-game-surface .overlay {
  position: fixed !important;
  inset: 0 !important;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.pml-game-surface .sync-guide-card {
  width: min(900px, calc((var(--pml-vw, 1vw) * 100) - 24px)) !important;
  max-width: calc((var(--pml-vw, 1vw) * 100) - 24px) !important;
  max-height: calc((var(--pml-vh, 1vh) * 100) - 18px) !important;
  padding: clamp(10px, 2vw, 18px) !important;
  overflow: auto !important;
  box-sizing: border-box;
}

.pml-game-surface .sync-guide-card h1,
.pml-game-surface .sync-guide-card h2 {
  margin: 6px 0 10px !important;
  font-size: clamp(22px, 3vw, 36px) !important;
  line-height: 1.1 !important;
}

.pml-game-surface .sync-guide {
  height: clamp(180px, calc(var(--pml-vh, 1vh) * 46), 430px) !important;
  min-height: 0 !important;
}

.pml-game-surface .sync-guide-card .guide-actions,
.pml-game-surface .sync-guide-card .overlay-actions {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: 10px !important;
  padding-top: 10px !important;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(238, 249, 252, 0), rgba(238, 249, 252, 0.94) 34%, rgba(238, 249, 252, 0.98));
}

.pml-game-surface .sync-guide-card button {
  min-height: 44px;
  white-space: nowrap;
}

@media (orientation: landscape) and (max-height: 760px) {
  .pml-game-surface .topbar {
    gap: 8px !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }

  .pml-game-surface .brand h1,
  .pml-game-surface .brand-title {
    font-size: clamp(20px, 2.4vw, 30px) !important;
  }

  .pml-game-surface .status-grid {
    gap: 6px !important;
  }

  .pml-game-surface .status-card {
    padding: 8px 10px !important;
    min-height: 64px !important;
  }

  .pml-game-surface .status-card strong {
    font-size: clamp(18px, 2.8vw, 28px) !important;
    line-height: 1.08 !important;
  }

  .pml-game-surface .sync-guide-card {
    width: min(820px, calc((var(--pml-vw, 1vw) * 100) - 20px)) !important;
    max-width: calc((var(--pml-vw, 1vw) * 100) - 20px) !important;
    max-height: calc((var(--pml-vh, 1vh) * 100) - 14px) !important;
    padding: 10px !important;
  }

  .pml-game-surface .sync-guide-card h1,
  .pml-game-surface .sync-guide-card h2 {
    font-size: clamp(22px, 3.4vw, 32px) !important;
    margin-bottom: 8px !important;
  }

  .pml-game-surface .sync-guide {
    height: clamp(170px, calc(var(--pml-vh, 1vh) * 42), 330px) !important;
  }

  .pml-game-surface .sync-caption {
    max-width: min(72%, 520px) !important;
  }
}

.pml-game-surface.pml-device-tablet.pml-stable-mode canvas,
.pml-game-surface.pml-device-phone canvas {
  image-rendering: auto;
}

@media (max-width: 1180px) {
  .performance-workspace-grid,
  .analysis-workspace-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .performance-preview-stage,
  .capture-preview-frame,
  .analysis-video-stage {
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  .pml-device-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .pml-device-notice button {
    margin-left: auto;
  }

  .performance-preview-stage,
  .capture-preview-frame,
  .analysis-video-stage {
    min-height: 260px;
  }
}

/* v93: River Boat phone-landscape play mode. Loaded after shared device rules. */
.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .river-app {
  width: 100vw !important;
  min-height: var(--pml-app-height, 100svh) !important;
  height: var(--pml-app-height, 100svh) !important;
  max-height: var(--pml-app-height, 100svh) !important;
  display: grid !important;
  grid-template-rows: 40px minmax(0, 1fr) 30px !important;
  gap: 4px !important;
  padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .brand,
.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar-actions {
  display: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 0.72fr 0.72fr 0.72fr !important;
  gap: 4px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card:nth-child(2) {
  display: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card {
  min-height: 36px !important;
  max-height: 40px !important;
  padding: 3px 7px !important;
  border-radius: 9px !important;
  gap: 5px !important;
  box-shadow: 0 3px 10px rgba(9, 42, 70, 0.14) !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-icon {
  width: 21px !important;
  height: 21px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card span {
  font-size: 8px !important;
  line-height: 1 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card strong {
  font-size: clamp(12px, 2.4vw, 17px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 12px !important;
  border-width: 2px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #camera.is-live {
  opacity: 0.14 !important;
  filter: saturate(0.75) contrast(0.95) !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage-vignette {
  opacity: 0.18 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-panel {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  right: auto !important;
  bottom: auto !important;
  width: min(230px, 30vw) !important;
  max-height: calc(100% - 52px) !important;
  display: grid !important;
  gap: 5px !important;
  z-index: 6 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-card {
  min-height: 0 !important;
  padding: 5px 7px !important;
  border-radius: 8px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 6px !important;
  background: rgba(244, 252, 255, 0.78) !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-card:nth-child(n+3) {
  display: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-card-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-card h2,
.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-card h3 {
  margin: 0 0 1px !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-card p {
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror {
  right: 8px !important;
  bottom: 36px !important;
  width: min(220px, 28vw) !important;
  min-height: 0 !important;
  padding: 7px !important;
  border-radius: 10px !important;
  gap: 6px !important;
  z-index: 7 !important;
  background: rgba(13, 74, 96, 0.76) !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-label {
  font-size: 10px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-text {
  font-size: 12px !important;
  line-height: 1.18 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #cameraButton {
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 9px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline-panel {
  position: static !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 3px 7px !important;
  border-radius: 10px !important;
  z-index: 9 !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .time-readout {
  display: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #playButton {
  width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  font-size: 10px !important;
}

/* v94: remove legato/staccato teaching cards during active phone play and scale UI down again. */
.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .river-app {
  grid-template-rows: 32px minmax(0, 1fr) 26px !important;
  gap: 3px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card:nth-child(1),
.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card:nth-child(2) {
  display: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card {
  min-height: 30px !important;
  max-height: 32px !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card span {
  font-size: 7px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card strong {
  font-size: clamp(11px, 2.1vw, 15px) !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-panel {
  display: none !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror {
  width: min(180px, 24vw) !important;
  bottom: 32px !important;
  padding: 5px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-text {
  font-size: 10px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #cameraButton {
  min-height: 21px !important;
  padding: 3px 7px !important;
  font-size: 8px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline-panel {
  min-height: 24px !important;
  padding: 2px 6px !important;
}

.pml-river-boat-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #playButton {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
}

/* v95: apply the compact active-play phone layout to the other three Motion Music games. */
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive,
.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .river-app {
  width: 100vw !important;
  min-height: var(--pml-app-height, 100svh) !important;
  height: var(--pml-app-height, 100svh) !important;
  max-height: var(--pml-app-height, 100svh) !important;
  display: grid !important;
  grid-template-rows: 32px minmax(0, 1fr) 26px !important;
  gap: 3px !important;
  padding: 3px max(6px, env(safe-area-inset-right)) 3px max(6px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .brand,
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar-actions,
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card:nth-child(1),
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card:nth-child(2),
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cue-panel,
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .time-readout {
  display: none !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  overflow: hidden !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card {
  min-height: 30px !important;
  max-height: 32px !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card i {
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card span {
  font-size: 7px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card strong {
  font-size: clamp(11px, 2.1vw, 15px) !important;
  line-height: 1.05 !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage {
  min-height: 0 !important;
  height: 100% !important;
  border-width: 2px !important;
  border-radius: 12px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #camera.is-live {
  opacity: 0.14 !important;
  filter: saturate(0.75) contrast(0.95) !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror {
  width: min(180px, 24vw) !important;
  right: 8px !important;
  bottom: 32px !important;
  padding: 5px !important;
  border-radius: 10px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror strong {
  font-size: 10px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #cameraButton {
  min-height: 21px !important;
  padding: 3px 7px !important;
  font-size: 8px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline-panel {
  position: static !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  min-height: 24px !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .round-button {
  width: 20px !important;
  height: 20px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cave-app,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .bridge-app {
  width: 100vw !important;
  min-height: var(--pml-app-height, 100svh) !important;
  height: var(--pml-app-height, 100svh) !important;
  max-height: var(--pml-app-height, 100svh) !important;
  gap: 3px !important;
  padding: 3px max(6px, env(safe-area-inset-right)) 3px max(6px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .cave-app {
  grid-template-rows: minmax(0, 1fr) 24px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .bridge-app {
  grid-template-rows: minmax(0, 1fr) 28px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar {
  top: max(3px, env(safe-area-inset-top)) !important;
  right: max(6px, env(safe-area-inset-right)) !important;
  left: max(6px, env(safe-area-inset-left)) !important;
  gap: 4px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .brand,
.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar-actions,
.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .guide-card,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar-actions,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .guide-card,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card.mode-card,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card.compact {
  display: none !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card {
  min-height: 30px !important;
  max-height: 32px !important;
  max-width: 24vw !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-icon,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card small,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card small {
  font-size: 7px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card strong,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card strong {
  font-size: clamp(10px, 2vw, 14px) !important;
  line-height: 1.05 !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage-shell,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .game-shell {
  min-height: 0 !important;
  gap: 4px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage-shell {
  grid-template-columns: minmax(0, 1fr) 34px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .game-shell {
  grid-template-columns: minmax(0, 1fr) 34px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage-card {
  min-height: 0 !important;
  height: 100% !important;
  border-width: 2px !important;
  border-radius: 12px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #camera.is-live,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #camera.is-live {
  opacity: 0.14 !important;
  filter: saturate(0.75) contrast(0.95) !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .hand-panel,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .side-meter {
  width: 34px !important;
  padding: 4px 3px !important;
  border-radius: 9px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .hand-icon,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .meter-title,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .side-label,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .meter-help {
  display: none !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .hand-slider,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .meter-track {
  width: 20px !important;
  min-height: 96px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .target-label {
  display: none !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill {
  right: 44px !important;
  bottom: 32px !important;
  min-width: min(180px, 28vw) !important;
  max-width: 28vw !important;
  padding: 5px 7px !important;
  border-radius: 10px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill strong,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill strong {
  font-size: 11px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill span,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill span {
  font-size: 9px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .action-cue {
  top: 36px !important;
  min-width: min(190px, 28vw) !important;
  max-width: 28vw !important;
  padding: 5px 7px !important;
  border-radius: 10px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .action-cue strong {
  font-size: 12px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .action-cue span {
  font-size: 9px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .play-panel,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .play-panel {
  right: 44px !important;
  bottom: max(3px, env(safe-area-inset-bottom)) !important;
  padding: 3px 6px !important;
  border-radius: 9px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .play-panel button,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .play-panel button {
  width: 22px !important;
  height: 22px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline-panel,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline-card {
  min-height: 24px !important;
  padding: 2px 6px !important;
  border-radius: 9px !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #timelineCanvas,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #timelineCanvas {
  height: 22px !important;
}

/* v96: polish the compact phone play mode for Note Nibbler, Cave Dynamics, and Rhythm Bridge. */
.pml-note-path-surface.pml-device-phone.pml-orientation-portrait .orientation-lock,
.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-portrait .orientation-lock,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-portrait .orientation-lock {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .river-app {
  grid-template-rows: 28px minmax(0, 1fr) 22px !important;
  gap: 2px !important;
  padding: 2px max(5px, env(safe-area-inset-right)) 2px max(5px, env(safe-area-inset-left)) !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .topbar {
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-grid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  pointer-events: auto !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  min-height: 27px !important;
  max-height: 28px !important;
  padding: 1px 5px !important;
  overflow: hidden !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #camera,
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive #gameCanvas,
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .stage-vignette {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror {
  width: min(150px, 22vw) !important;
  right: 7px !important;
  bottom: 28px !important;
  gap: 5px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror span,
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror strong {
  font-size: 8px !important;
  line-height: 1.15 !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline-panel {
  min-height: 20px !important;
  height: 22px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 5px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline {
  height: 18px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .timeline-track {
  inset: 6px 0 !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill span,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill span,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .action-cue span,
.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .play-panel span,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .play-panel span {
  display: none !important;
}

.pml-cave-dynamics-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill {
  min-width: 0 !important;
  max-width: 21vw !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card:nth-of-type(3) {
  display: none !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card {
  max-width: 22vw !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .action-cue {
  top: 34px !important;
  min-width: 0 !important;
  max-width: 20vw !important;
}

/* v97: tighten Note Nibbler and Rhythm Bridge active play on phone landscape. */
.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .river-app,
.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .game-shell {
  transform: scale(0.93) !important;
  transform-origin: top center !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror {
  width: min(118px, 17vw) !important;
  right: 6px !important;
  bottom: 24px !important;
  padding: 5px !important;
  border-radius: 8px !important;
  gap: 4px !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror span {
  display: none !important;
}

.pml-note-path-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .motion-mirror strong {
  font-size: 7px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 33vw !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .status-card {
  min-height: 27px !important;
  max-height: 30px !important;
  max-width: none !important;
  padding: 1px 5px !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .action-cue {
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(150px, 20vw) !important;
  max-width: min(150px, 20vw) !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  border-radius: 9px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .action-cue strong {
  font-size: 10px !important;
  white-space: nowrap !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill {
  max-width: 16vw !important;
  min-height: 24px !important;
  padding: 4px 7px !important;
  border-radius: 9px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape.pml-game-immersive .feedback-pill strong {
  font-size: 9px !important;
  white-space: nowrap !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-guide-card {
  width: min(820px, calc(100vw - 18px)) !important;
  max-height: calc(100dvh - 20px) !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-guide-card h2 {
  font-size: clamp(18px, 3.2vw, 26px) !important;
  line-height: 1.08 !important;
  margin: 3px 0 8px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-guide {
  height: min(50dvh, 240px) !important;
  border-radius: 12px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-caption {
  left: 10px !important;
  right: auto !important;
  bottom: 10px !important;
  width: min(220px, 31vw) !important;
  max-width: min(220px, 31vw) !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-caption strong {
  font-size: 13px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-caption span {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-guide-card .overlay-actions {
  gap: 8px !important;
  justify-content: flex-end !important;
  margin-top: 8px !important;
}

.pml-rhythm-bridge-surface.pml-device-phone.pml-orientation-landscape .sync-guide-card .overlay-actions button {
  min-height: 34px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}

/* v99: make Rhythm Bridge portrait lock independent from fragile mobile UA detection. */
@media (orientation: portrait) and (max-width: 900px), (orientation: portrait) and (pointer: coarse) {
  .pml-rhythm-bridge-surface .orientation-lock {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
  }

  .pml-rhythm-bridge-surface .bridge-app,
  .pml-rhythm-bridge-surface .overlay:not(.orientation-lock) {
    pointer-events: none !important;
  }
}

@media (orientation: landscape) {
  .pml-rhythm-bridge-surface .orientation-lock {
    display: none !important;
  }
}

/* v100: robust portrait prompt for Rhythm Bridge before runtime device classes finish loading. */
@media (orientation: portrait) and (max-width: 900px), (orientation: portrait) and (pointer: coarse) {
  body.pml-rhythm-bridge-surface {
    overflow: hidden !important;
    background: linear-gradient(180deg, #064367 0%, #0f9cac 100%) !important;
  }

  .pml-rhythm-bridge-surface .orientation-lock {
    align-items: center !important;
    justify-content: center !important;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
    background: linear-gradient(180deg, #064367 0%, #0f9cac 100%) !important;
    box-sizing: border-box !important;
  }

  .pml-rhythm-bridge-surface .orientation-lock > div {
    width: min(360px, calc(100vw - 42px)) !important;
    padding: 26px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 24px !important;
    background: rgba(239, 252, 255, 0.94) !important;
    color: #0f2d50 !important;
    text-align: center !important;
    box-shadow: 0 24px 70px rgba(0, 24, 54, 0.32) !important;
  }

  .pml-rhythm-bridge-surface .orientation-lock span {
    display: grid !important;
    place-items: center !important;
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto 14px !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #1f80ff, #4de7ff) !important;
    color: #ffffff !important;
    font-size: 44px !important;
    font-weight: 900 !important;
  }

  .pml-rhythm-bridge-surface .orientation-lock h1 {
    margin: 0 0 10px !important;
    color: #0f2d50 !important;
    font-size: 34px !important;
    line-height: 1.1 !important;
  }

  .pml-rhythm-bridge-surface .orientation-lock p {
    margin: 0 !important;
    color: #4d6279 !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    line-height: 1.55 !important;
  }

  .pml-rhythm-bridge-surface .orientation-lock a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    margin-top: 18px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    background: #0f6b85 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }
}