/* P97: compact floating flags and start countdown on the mobile map. */
@media (max-width: 820px) {
  body.mobile-ui-active #map {
    position: relative;
  }

  body.mobile-ui-active #map > .ow-start-map-tile {
    position: absolute !important;
    top: 12px;
    right: 10px;
    z-index: 890;
    display: grid !important;
    grid-template-columns: 1fr;
    width: min(154px, calc(100vw - 132px));
    min-height: 54px;
    gap: 3px;
    box-sizing: border-box;
    padding: 7px 32px 7px 9px !important;
    border: 1px solid rgba(91, 132, 154, 0.38);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      0 6px 18px rgba(22, 55, 73, 0.18),
      0 1px 2px rgba(22, 55, 73, 0.12);
    backdrop-filter: blur(8px);
    color: #173955;
    pointer-events: auto;
    transition:
      width 160ms ease,
      min-height 160ms ease,
      padding 160ms ease,
      opacity 160ms ease;
  }

  body.mobile-ui-active #map > .ow-start-map-tile[hidden] {
    display: none !important;
  }

  body.mobile-ui-active #map > .ow-start-map-tile[data-collapsed="true"] {
    width: 38px;
    min-height: 40px;
    padding: 4px !important;
    border-radius: 12px 0 0 12px;
  }

  #map > .ow-start-map-tile[data-collapsed="true"] >
  :not(.ow-start-map-tile-toggle) {
    display: none !important;
  }

  .ow-start-map-tile-toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-grid;
    width: 25px;
    height: 25px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(224, 239, 246, 0.88);
    color: #0b6580;
    cursor: pointer;
    touch-action: manipulation;
  }

  .ow-start-map-tile-toggle:focus-visible {
    outline: 2px solid #007ca8;
    outline-offset: 2px;
  }

  .ow-start-map-tile-toggle-flag {
    display: none;
    font-size: 17px;
    line-height: 1;
  }

  .ow-start-map-tile-toggle-arrow {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
  }

  .ow-start-map-tile[data-collapsed="true"]
  .ow-start-map-tile-toggle {
    position: static;
    width: 30px;
    height: 30px;
    background: transparent;
  }

  .ow-start-map-tile[data-collapsed="true"]
  .ow-start-map-tile-toggle-flag {
    display: block;
  }

  .ow-start-map-tile[data-collapsed="true"]
  .ow-start-map-tile-toggle-arrow {
    display: none;
  }

  #map > .ow-start-map-tile .mobile-more-status {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #173955;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  #map > .ow-start-map-tile .mobile-start-flags-section {
    display: flex !important;
    min-height: 23px !important;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #map > .ow-start-map-tile .mobile-start-flags-title {
    display: none !important;
  }

  #map > .ow-start-map-tile .mobile-start-flags-slot {
    min-width: 0;
    justify-content: flex-start;
  }

  #map > .ow-start-map-tile #ow-static-mode-status-v1 {
    position: relative !important;
    z-index: auto !important;
    display: inline-flex !important;
    max-width: 100%;
  }

  #map > .ow-start-map-tile #ow-static-mode-status-v1[hidden] {
    display: none !important;
  }

  #map > .ow-start-map-tile
  #ow-static-mode-status-v1 button.ow-start-flag,
  #map > .ow-start-map-tile
  #ow-static-mode-status-v1 .ow-start-flag svg {
    width: 25px !important;
    height: 19px !important;
  }

  #map > .ow-start-map-tile .ow-flag-help {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: min(228px, calc(100vw - 24px)) !important;
    transform: none !important;
  }

  body.mobile-more-open #map > .ow-start-map-tile {
    opacity: 0;
    pointer-events: none;
  }
}

@media (min-width: 821px) {
  .ow-start-map-tile-toggle {
    display: none !important;
  }
}