.wrong-way {
  position: absolute;
  top: 86px;
  left: 50%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 190px;
  padding: 11px 24px 10px;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, rgba(216, 0, 39, .94), rgba(84, 0, 17, .92));
  border: 2px solid rgba(255, 116, 133, .9);
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(255, 23, 61, .62), 0 12px 35px rgba(0, 0, 0, .65);
  transform: translateX(-50%);
  transition: opacity .18s ease, transform .18s ease;
  animation: wrong-way-pulse .72s ease-in-out infinite alternate;
}

.wrong-way.hidden {
  transform: translate(-50%, -12px) scale(.92);
}

.wrong-way strong {
  font-size: 22px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: .17em;
  line-height: 1;
}

.wrong-way small {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .19em;
  color: rgba(255, 255, 255, .78);
}

.wrong-way-arrow-wrap {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 7, 12, .84);
  border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .8);
}

.wrong-way-arrow {
  display: block;
  color: #ffd24a;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  transform: rotate(0rad);
  transform-origin: 50% 50%;
  transition: transform .12s linear;
  text-shadow: 0 0 12px rgba(255, 210, 74, .8);
}

@keyframes wrong-way-pulse {
  from { filter: brightness(.92); }
  to { filter: brightness(1.14); }
}

@media (max-width: 820px), (max-height: 560px) {
  .wrong-way {
    top: 58px;
    min-width: 154px;
    padding: 8px 16px 7px;
    border-radius: 12px;
  }

  .wrong-way strong { font-size: 16px; }
  .wrong-way small { font-size: 7px; }
  .wrong-way-arrow-wrap { width: 38px; height: 38px; }
  .wrong-way-arrow { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .wrong-way { animation: none; }
  .wrong-way-arrow { transition: none; }
}