body {
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

.scene-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}




/* 🜏 SIGIL */
.sigil {
  position: absolute;
  right: 6%;
  bottom: 12%;
  width: 100px;
  z-index: 25;
  cursor: pointer;

  transition: transform 0.3s ease;

  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
}

.sigil:hover {
  transform: scale(1.08);
}

.sigil:focus,
.sigil:active,
.sigil:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* 🔥 HOTSPOTS */
.hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 10;

  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;

  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.hotspot:focus,
.hotspot:active,
.hotspot:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* Базовые координаты — как запасной вариант */
.hotspot-left {
  left: 22%;
  top: 25%;
  width: 13%;
  height: 50%;
}

.hotspot-center {
  left: 44%;
  top: 25%;
  width: 13%;
  height: 50%;
}

.hotspot-right {
  right: 21%;
  top: 25%;
  width: 13%;
  height: 50%;
}

/* =========================
   MOBILE NAVIGATION PANEL
   ========================= */
.mobile-nav {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;

  width: min(92%, 520px);
  padding: 10px;
  border-radius: 18px;

  background: rgba(18, 10, 8, 0.68);
  backdrop-filter: blur(6px);

  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(255, 170, 90, 0.08);

  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-nav-btn {
  border: 1px solid rgba(255, 200, 140, 0.20);
  border-radius: 999px;
  padding: 12px 14px;

  background: rgba(32, 17, 12, 0.72);
  color: rgba(255, 220, 180, 0.95);

  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

.mobile-nav-btn:hover,
.mobile-nav-btn:active {
  transform: scale(1.03);
  background: rgba(54, 28, 18, 0.82);
  color: rgba(255, 235, 205, 1);
  box-shadow: 0 0 12px rgba(255, 170, 90, 0.16);
}

/* =========================
   LARGE SCREENS 1201+
   ========================= */
@media (min-width: 1201px) {
  .sigil {
    width: 150px;
    right: 8%;
    bottom: 4%;
  }


  .hotspot-left {
    left: 21%;
    top: 25%;
    width: 13%;
    height: 65%;
  }

  .hotspot-center {
    left: 44%;
    top: 25%;
    width: 13%;
    height: 65%;
  }

  .hotspot-right {
    right: 21%;
    top: 25%;
    width: 13%;
    height: 65%;
  }
}

/* =========================
   901px – 1200px
   ========================= */
@media (min-width: 901px) and (max-width: 1200px) {
  .sigil {
    width: 110px;
    right: 4%;
    bottom: 5%;
  }


  .hotspot-left {
    left: 21%;
    top: 25%;
    width: 13%;
    height: 50%;
  }

  .hotspot-center {
    left: 44%;
    top: 25%;
    width: 13%;
    height: 50%;
  }

  .hotspot-right {
    right: 21%;
    top: 25%;
    width: 13%;
    height: 50%;
  }
}

/* =========================
   821px – 900px
   ========================= */
@media (min-width: 821px) and (max-width: 900px) {
  .sigil {
    width: 150px;
    right: 4%;
    bottom: 3%;
  }


  .hotspot-left {
    left: 21%;
    top: 24%;
    width: 15%;
    height: 50%;
  }

  .hotspot-center {
    left: 44%;
    top: 25%;
    width: 15%;
    height: 50%;
  }

  .hotspot-right {
    right: 21%;
    top: 25%;
    width: 15%;
    height: 50%;
  }
}

/* =========================
   601px – 820px
   ========================= */
@media (min-width: 601px) and (max-width: 820px) {
  .sigil {
    width: 120px;
    right: 6%;
    bottom: 2%;
  }


  .hotspot-left {
    left: 9%;
    top: 25%;
    width: 17%;
    height: 50%;
  }

  .hotspot-center {
    left: 42%;
    top: 25%;
    width: 17%;
    height: 50%;
  }

  .hotspot-right {
    right: 10%;
    top: 25%;
    width: 17%;
    height: 50%;
  }
}

/* =========================
   MOBILE 600px AND BELOW
   ========================= */
@media (max-width: 600px) {
  .hotspot {
    display: none;
  }

  .mobile-nav {
    display: grid;
  }

  .sigil {
    width: 66px;
    right: 4%;
    bottom: 108px;
  }

}

/* =========================
   VERY NARROW PHONES
   ========================= */
@media (max-width: 420px) {
  .mobile-nav {
    width: 94%;
    bottom: 14px;
    padding: 8px;
    gap: 8px;
  }

  .mobile-nav-btn {
    font-size: 12px;
    padding: 10px 10px;
  }

  .sigil {
    width: 100px;
    bottom: 122px;
  }

}

/* =========================
   PROBLEM SCREEN 1280x1245
   HALF / TALL MID SCREEN
   ========================= */
@media (min-width: 1200px) and (max-width: 1400px) and (min-height: 1000px) {
  .sigil {
    width: 120px;
    right: 4%;
    bottom: 5%;
  }


  .hotspot-left {
    left: 10%;
    top: 25%;
    width: 20%;
    height: 50%;
  }

  .hotspot-center {
    left: 40%;
    top: 25%;
    width: 20%;
    height: 50%;
  }

  .hotspot-right {
    right: 8%;
    top: 25%;
    width: 20%;
    height: 50%;
  }
}

/* =========================
   PROBLEM SCREEN 1280x800
   WIDE BUT SHORT
   ========================= */
@media (min-width: 1200px) and (max-width: 1400px) and (max-height: 900px) {
  .sigil {
    width: 120px;
    right: 6%;
    bottom: 6%;
  }


  .hotspot-left {
    left: 20%;
    top: 25%;
    width: 14%;
    height: 65%;
  }

  .hotspot-center {
    left: 43%;
    top: 25%;
    width: 14%;
    height: 65%;
  }

  .hotspot-right {
    right: 20%;
    top: 25%;
    width: 14%;
    height: 65%;
  }
}