/* MOBILE ONLY PATCH - does not affect desktop */
.mobile-only-status-legend {
  display: none;
}

@media screen and (max-width: 768px) {
  /* Show EN/RU status legend at the bottom only on mobile */
  .mobile-only-status-legend {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    z-index: 2147483000 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
    color: #f7faf6 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, rgba(18, 38, 32, 0.86), rgba(8, 18, 16, 0.72)) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transform: none !important;
  }

  .mobile-only-status-legend div {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
  }

  .mobile-only-status-legend .legend-box {
    width: 11px !important;
    height: 11px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
  }

  .mobile-only-status-legend .legend-box.green {
    background: rgba(82, 178, 102, 0.95) !important;
  }

  .mobile-only-status-legend .legend-box.red {
    background: rgba(213, 80, 72, 0.95) !important;
  }

  /* Hide the old EN/RU desktop legend only on mobile if it exists */
  body:has(.mobile-only-status-legend) .legend {
    display: none !important;
  }

  /* iPhone readability: bigger plot number and area labels on mobile only */
  .plot-label {
    opacity: 1 !important;
    stroke-width: 3.4px !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) !important;
  }

  .plot-main {
    font-size: 46px !important;
    font-weight: 900 !important;
  }

  .plot-area {
    font-size: 23px !important;
    font-weight: 900 !important;
  }

  .plot-link:hover .plot-main {
    font-size: 47px !important;
  }

  .plot-link:hover .plot-area {
    font-size: 24px !important;
  }
}

@media screen and (max-width: 430px) {
  .mobile-only-status-legend {
    bottom: 8px !important;
    font-size: 10px !important;
  }

  .plot-label {
    stroke-width: 3.2px !important;
  }

  .plot-main {
    font-size: 42px !important;
  }

  .plot-area {
    font-size: 21px !important;
  }

  .plot-link:hover .plot-main {
    font-size: 43px !important;
  }

  .plot-link:hover .plot-area {
    font-size: 22px !important;
  }
}