/* =========================================================================
   radar.css — GTA VI სტილის რადარი (დახრილი 3D რუკა, heading-up)
   ზომა:  --radar-w / --radar-h  (JS-ში იგივე ზომები იკითხება ავტომატურად)
   ========================================================================= */
:root {
  --radar-w: 300px;
  --radar-h: 220px;
  --radar-pink: #ff5fa8;
}

.radar {
  position: relative;
  width: var(--radar-w);
  height: var(--radar-h);
  flex: none;
  font-family: 'Noto Sans Georgian', 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
}

.radar-frame {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, #8d8a87 0%, #a39e98 55%, #b3ada6 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
  isolation: isolate;
  transition: opacity .25s ease;
}

/* ---------- 3D რუკა ---------- */
.radar-scene {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 34%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 34%);
  transition: opacity .4s ease;
}
.radar.nodata .radar-scene { opacity: 0; }

.radar-plane {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  /* transform და transform-origin JS-იდან იდგმება (tilt / perspective / pivot) */
}

.radar-world {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
.radar-world > .radar-tile { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.radar-world > .radar-tex {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- ზედა/ქვედა დაჩრდილვა ---------- */
.radar-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to bottom, rgba(20, 20, 26, .28) 0%, rgba(20, 20, 26, 0) 26%),
    linear-gradient(to top, rgba(10, 10, 14, .60) 0%, rgba(10, 10, 14, .0) 34%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .28);
}

/* ---------- ზედა-მარცხენა: მანძილი ---------- */
.radar-dist {
  position: absolute;
  left: 18px;
  top: 12px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.radar-dist.on { opacity: 1; transform: none; }

/* ---------- Canvas: მარშრუტი / ბლიპები / ვეიპოინტი ---------- */
.radar-fx {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
}

/* ---------- ჩრდილოეთის ნიშანი ---------- */
.radar-n {
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: #0b0b0d;
  border: 2px solid #fff;
  color: #fff;
  font: 800 11px/18px 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  will-change: transform;
}

/* ---------- მოთამაშის ისარი ---------- */
.radar-me {
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: #0b0b0d;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
}
.radar-me svg { width: 16px; height: 16px; fill: #fff; }

/* მანქანაში ოდნავ დიდი ისარი არ გვჭირდება — მხოლოდ ფერის აქცენტი */
.radar.in-vehicle .radar-me { border-color: #fff; }

/* ჰუდის დამალვის ნაწილი (togglePart('radar', 0)) */
.radar.hidden { display: none; }

/* ---------- მდგომარეობის ტექსტი (სანამ პოზიცია არ მოსულა) ---------- */
.radar-status {
  position: absolute;
  left: 18px; right: 18px; top: 38%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.radar:not(.nodata) .radar-status { display: none; }