:root{ --accent:#00E5FF; --text:#fff; --muted:rgba(255,255,255,.78); }
*{box-sizing:border-box}
body{margin:0; color:var(--text); background:#000; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.max-w{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.section{padding:clamp(32px,6vw,70px) 0}
h1,h2{font-family:"League Spartan",Poppins,sans-serif; text-transform:uppercase; letter-spacing:.06em}
h1{font-size:clamp(28px,6vw,46px); margin:0 0 8px}
h2{font-size:clamp(22px,5vw,32px); margin:26px 0 12px}
.lead{color:var(--muted); margin:0 0 22px}

/* Nav (simple) */
.nav{position:sticky; top:0; background:rgba(0,0,0,.6); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.1); z-index:10}
.nav .max-w{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.links a{color:#fff; text-decoration:none; margin-left:12px; text-transform:uppercase; letter-spacing:.12em; font-size:14px; opacity:.9}
.links a.active, .links a:hover{color:var(--accent)}

/* Tabs */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 18px}
.tab{cursor:pointer; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; padding:10px 14px; border-radius:999px; font-weight:600}
.tab:hover{background:rgba(255,255,255,.12)}
.tab.active{background:var(--accent); color:#001318; border-color:transparent}

/* Map viewer with pins */
.viewer{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:10px}
.map-wrap{position:relative; overflow:hidden; border-radius:12px}
#map-image{width:100%; height:auto; display:block}
.pins{position:absolute; inset:0; pointer-events:none}
.pin{
  --size: 22px;
  position:absolute;
  transform:translate(-50%,-100%);   /* tip points to the exact spot */
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  pointer-events:auto;
  cursor:pointer;

  /* Sexy glowing gradient dot */
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0, #ff0000 45%, #ff000086 100%);
  border:2px solid rgba(0,0,0,.9);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(255, 8, 0, 0.85);

  position:relative;   /* for the pulse ring */
}

/* Pulse ring */
.pin::after{
  content:"";
  position:absolute;
  inset:-8px;                  /* slightly bigger than the pin */
  border-radius:inherit;
  border:2px solid rgba(252, 60, 2, 0.24);
  opacity:0;
  transform:scale(.75);
  animation:pinPulse 1.4s ease-out infinite;
}

/* Hover pop */
.pin:hover{
  transform:translate(-50%,-100%) scale(1.08);
  box-shadow:
    0 0 0 4px rgba(255, 0, 0, 0.288),
    0 0 22px rgb(255, 0, 0);
}

/* Pulse animation */
@keyframes pinPulse{
  0%{
    opacity:.9;
    transform:scale(.7);
  }
  100%{
    opacity:0;
    transform:scale(1.5);
  }
}

/* Special styling for Resource Arena pin */
.pin.pin-arena{
  --size: 30px;  /* bigger */

  background:
    radial-gradient(circle at 30% 30%, #ffffff 0, #ffe066 45%, #ff9f1c 100%);
  box-shadow:
    0 0 0 4px rgba(255,224,102,0.45),
    0 0 26px rgba(255,159,28,0.95);

  z-index: 2; /* make sure it sits above other pins */
}

.pin.pin-arena::after{
  border-color: rgba(255,224,102,0.6);
}


/* Spot thumbnails */
.spots-title{margin-top:24px}
.spot-grid{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .spot-grid{grid-template-columns:1fr} }
.spot{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s}
.spot:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.35)}
.spot img{width:100%; height:170px; object-fit:cover; display:block}
.spot .meta{padding:10px 12px}
.spot h3{margin:0 0 6px; font-size:18px}

/* coords + desc inside cards */
.spot .meta .coords{
  display:block;
  font-size:12px;
  color:var(--muted);
}
.spot .meta .desc{
  margin-top:4px;
  font-size:13px;
  color:rgba(255,255,255,0.9);
}

/* Lightbox */
.lightbox[aria-hidden="true"]{display:none}
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85); display:grid; place-items:center; z-index:100;
}
.lightbox img{max-width:min(92vw,1200px); max-height:80vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .close{
  position:absolute; top:14px; right:18px; font-size:36px; line-height:1; background:none; border:none; color:#fff; cursor:pointer
}
#lightbox-caption{
  margin-top:10px;
  color:#fff;
  text-align:center;
  font-weight:600;
  font-size:0.95rem;
}

/* coords + desc in lightbox caption */
#lightbox-caption .coords{
  margin-left:6px;
  font-weight:400;
  font-size:0.85rem;
  color:var(--muted);
}
#lightbox-caption .desc{
  display:block;
  margin-top:4px;
  font-weight:400;
  font-size:0.9rem;
  color:rgba(255,255,255,0.9);
}