body {
  color: #202020;
}

img {
  border-radius: 10px;
}

#myBtn {
        display: none;
        position: absolute;
        top: calc(5px + env(safe-area-inset-top, 0px));
        right: 15px;
        padding: 1px;
        background-color: transparent;
        color: #ee7e18;
        border: none;
        font-size: 33px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.3s ease-in-out;
        scroll-behavior: smooth; /* добавляем плавный скролл */
      }

/* Adaptive wind rose dimensions are calculated for the available screen
   orientation by untr-index-layout.js. */
html.wind-layout-pending #container_main {
  visibility: hidden;
}

#container_main,
#container_wind {
  width: var(--wind-container-size, 260px);
  height: var(--wind-container-size, 260px);
}

#container_main {
  top: var(--wind-center-top, 50%);
}

#circle {
  width: var(--wind-circle-size, 234px);
  height: var(--wind-circle-size, 234px);
  border-width: var(--wind-stroke-size, 3.9px);
}

#triangle {
  border-left-width: var(--wind-arrow-side, 13px);
  border-right-width: var(--wind-arrow-side, 13px);
  border-top-width: var(--wind-arrow-depth, 39px);
}

#vpp {
  width: var(--wind-runway-width, 195px);
  height: var(--wind-runway-height, 19.5px);
}

#line {
  width: var(--wind-centerline-width, 143px);
  border-top-width: var(--wind-stroke-size, 3.9px);
}

#num1 {
  font-size: var(--wind-number-font, 18.2px);
  transform: translate(-50%, -50%) rotate(-90deg)
    translate(var(--wind-number-nudge, 1.3px), var(--wind-number-offset, 87.1px));
}

#num2 {
  font-size: var(--wind-number-font, 18.2px);
  transform: translate(-50%, -50%) rotate(90deg)
    translate(var(--wind-number-nudge-negative, -1.3px), var(--wind-number-offset, 87.1px));
}

#text_n,
#text_s,
#text_e,
#text_w {
  font-size: var(--wind-label-font, 28.6px);
}

#line_n,
#line_s,
#line_e,
#line_w {
  width: var(--wind-tick-width, 13px);
  height: var(--wind-tick-height, 3.9px);
}

.part:nth-child(3) .left {
  min-height: var(--wind-area-height, 380px);
}

/* Keep the weather text proportional when a desktop or landscape window is
   narrowed. At ordinary desktop widths it remains at the original 30px. */
.part:nth-child(3),
.part:nth-child(4) {
  font-size: clamp(16px, 3vw, 30px);
}

#runway_recommendation {
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 700px) {
  .part:nth-child(1) .image-container {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 1vw, 6px);
  }

  .part:nth-child(1) .image-container a:first-child {
    flex: 0 1 60%;
    min-width: 0;
    margin-left: 0;
  }

  .part:nth-child(1) .image-container a:not(:first-child) {
    flex: 0 1 11%;
    min-width: 0;
    margin-left: 0;
  }

  .part:nth-child(1) .image-container img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (orientation: portrait) and (max-width: 600px) and (hover: none) and (pointer: coarse) {
  .part:nth-child(2) {
    font-size: clamp(14px, 4vw, 18px);
  }

  .part:nth-child(2) h1 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  .part:nth-child(3),
  .part:nth-child(4) {
    font-size: clamp(14px, 4.2vw, 19px);
  }

  .part:nth-child(5) {
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .part:nth-child(3) .left > div:first-child {
    font-size: clamp(15px, 4vw, 18px) !important;
  }

  .part:nth-child(3) .left > div:first-child span[style*="font-size: 37px"] {
    font-size: clamp(20px, 5.4vw, 24px) !important;
  }

  #myBtn {
    font-size: clamp(24px, 6.5vw, 30px);
  }

  #runway_recommendation {
    white-space: nowrap;
  }
}