/* OPC pixel world P0 overrides. Loaded last so the expanded mobile map keeps its exploration controls. */
.opc-pixel-world .world-mobile-routes {
  display: none;
}

@media (max-width: 820px) {
  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] .world-mobile-routes {
    display: grid;
    min-height: 60px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #dfe4ec;
    border-top: 0;
    background: #f7f9fc;
  }

  #ideas .opc-pixel-world .world-mobile-routes > strong {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
  }

  #ideas .opc-pixel-world .world-mobile-routes__actions {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #ideas .opc-pixel-world .world-mobile-routes button {
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #b7c5d9;
    border-radius: 6px;
    background: #fff;
    color: #253554;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    touch-action: manipulation;
  }

  #ideas .opc-pixel-world .world-mobile-routes button[aria-pressed="true"] {
    border-color: #0052d9;
    background: #edf4ff;
    color: #0052d9;
  }

  #ideas .opc-pixel-world .world-mobile-routes button:focus-visible {
    outline: 2px solid #0052d9;
    outline-offset: 2px;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] .world-stage #districtPanControls {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: block !important;
    width: auto;
    height: auto;
    visibility: visible;
    pointer-events: none;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls button {
    position: absolute;
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    visibility: visible;
    pointer-events: auto;
    touch-action: manipulation;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--left,
  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--right {
    top: 50%;
    transform: translateY(-50%);
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--left {
    left: 8px;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--right {
    right: 8px;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--up,
  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--down {
    left: 50%;
    transform: translateX(-50%);
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--up {
    top: 8px;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls .world-stage__pan-button--down {
    bottom: 58px;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls output {
    position: absolute;
    bottom: 8px;
    left: 50%;
    display: block !important;
    min-width: 200px;
    visibility: visible;
    font-size: 10px;
    transform: translateX(-50%);
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] #districtPanControls[hidden] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ideas .opc-pixel-world #districtPanControls button {
    transition: none !important;
  }
}