/* -------- Base / layout -------- */
body { margin: 0; }

.menu{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:.75rem 1rem;
}

.page-header{ padding:0 1rem; }

/* -------- Map container (background image) -------- */
.map-wrap{
  position: relative;
  aspect-ratio: 16 / 9;       /* desktop */
  min-height: 420px;
  margin: 0 1rem 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: url("smoky-map1.jpg") center/cover no-repeat;
}

/* Readability overlay */
.map-wrap::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
  pointer-events:none;
}

/* Ensure UI sits above the background */
.map-zone, .dashboard, .controls{
  position: relative;
  z-index: 1;
}

/* -------- Dashboard & controls -------- */
.dashboard{
  position:absolute; top:1rem; left:1rem;
  background: rgba(10,15,25,.65);
  color:#fff; backdrop-filter: blur(4px);
  padding:.75rem .9rem; border-radius:10px;
  width:min(280px, 70vw); line-height:1.25;
}

.controls{
  position:absolute; top:1rem; right:1rem;
  display:grid; gap:.5rem;
}

.btn{
  padding:.7rem 1rem; border-radius:10px; border:0; cursor:pointer;
}
.btn.primary{ background:#1f7aec; color:#fff; }

/* -------- Hotspots -------- */
.map-zone{
  position:absolute; width:46px; height:46px; border-radius:50%;
  background: rgba(255,180,0,.88);
  border:2px solid #0004;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

/* Example positions — tweak as needed */
#lookrock{      left:11%; top:28%; }
#clingmansdome{ left:58%; top:55%; }
#trainingroom{  left:32%; top:33%; }

/* Keyboard visibility */
.map-zone:focus-visible,
.dashboard:focus-visible,
.btn:focus-visible{
  outline:3px solid #fff; outline-offset:2px;
}

/* -------- Mobile tuning -------- */
@media (max-width: 768px){
  .map-wrap{
    aspect-ratio: 3 / 4;   /* taller map on phones */
    min-height: 62vh;
  }
  .dashboard{
    position: static;
    margin:.75rem 1rem 0; width:auto; color:#eaf2ff;
  }
  .controls{
    position: static;
    margin:.5rem 1rem 0 1rem;
    grid-auto-flow: column; justify-content:flex-start;
  }
}

/* -------- A-Frame block -------- */
.vr-wrap{
  margin:0 1rem 2rem; border-radius:10px; overflow:hidden;
  display:none;
}
.vr-wrap.visible{ display:block; }

.vr-toggle{
  margin:0 1rem 1rem; padding:.8rem 1rem;
  border-radius:10px; border:0; cursor:pointer;
  background:#0c9f6a; color:#fff; font-weight:600;
}