/* A phone using "desktop site" crosses the desktop width breakpoint, but it
   still needs a movable canvas when the player zooms in. Real mouse-driven
   desktops keep the locked one-screen layout from compact-ui.css. */
@media (min-width: 761px) and (pointer: coarse),
       (min-width: 761px) and (hover: none) {
  html,
  body {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    overflow: auto !important;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body {
    min-height: 100dvh;
  }

  .app-shell {
    width: max(100%, 980px);
    min-width: 980px;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .game-layout {
    height: auto;
    min-height: calc(100dvh - 48px);
    overflow: visible;
    align-items: start;
  }

  .side-column {
    position: sticky;
    top: 0;
    height: auto;
    max-height: calc(100dvh - 8px);
    align-self: start;
  }

  .main-panel {
    height: auto;
    min-height: calc(100dvh - 54px);
    overflow: visible;
  }

  .tab-view.active,
  .tab-view[data-tab="character"].active {
    height: auto;
    min-height: calc(100dvh - 66px);
    overflow: visible;
  }
}

/* Android browsers can report desktop pointer capabilities after the player
   enables "Desktop site". JavaScript adds this class from maxTouchPoints, so
   the scroll unlock does not depend on those unreliable media features. */
@media (min-width: 761px) {
  html.touch-canvas-enabled,
  html.touch-canvas-enabled body {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    overflow: auto !important;
    overscroll-behavior: auto !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  html.touch-canvas-enabled body {
    min-height: 100dvh;
  }

  html.touch-canvas-enabled .app-shell {
    width: max(100%, 980px);
    min-width: 980px;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  html.touch-canvas-enabled .game-layout {
    height: auto !important;
    min-height: calc(100dvh - 48px);
    overflow: visible !important;
    align-items: start;
  }

  html.touch-canvas-enabled .side-column {
    position: sticky;
    top: 0;
    height: auto;
    max-height: calc(100dvh - 8px);
    align-self: start;
  }

  html.touch-canvas-enabled .main-panel {
    height: auto !important;
    min-height: calc(100dvh - 54px);
    overflow: visible !important;
  }

  html.touch-canvas-enabled .tab-view.active,
  html.touch-canvas-enabled .tab-view[data-tab="character"].active {
    height: auto !important;
    min-height: calc(100dvh - 66px);
    overflow: visible !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }
}