/* Space background color — sampled from the dark edges of globe.png.
   Applied to body so the fixed page-nav strip matches too. */
:root {
  --color-space: #080c18;
}

body.map-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--color-space);
  animation: pageFadeIn 0.7s ease forwards;
}

/* Outer shell — centers the map container; space background fills height and clips at sides */
.map-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Background scales to 100% height, clips left/right on narrower viewports */
  background-color: var(--color-space);
  background-image: url('../assets/final/v2-assets/background-pixel.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  overflow: hidden;
}

/* Aspect-ratio-locked container — matches globe-floating.png native 180×181 px.
   Hotspot percentages are calculated as: pixel_x ÷ 180, pixel_y ÷ 181.

   Sized from HEIGHT, not width. height is (181/245)*100% so the globe scales
   at the same rate as the background (background is 245px tall, globe is 181px).
   aspect-ratio then derives the width — this keeps hotspots locked to the globe
   at any viewport width. max-width: 100% handles portrait/narrow viewports. */
.map-container {
  position: relative;
  aspect-ratio: 180 / 181;
  height: calc(181 / 245 * 100%);
  width: auto;
  max-width: 100%;
  max-height: 100%;
  animation: float 4s ease-in-out infinite alternate;
}

/* Floating globe — transparent PNG, sits over the space background */
.map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  user-select: none;
}

@keyframes cloudDrift {
  from { transform: translateX(-6px); }
  to   { transform: translateX(6px); }
}

/* Clouds — layered over the globe, pass clicks through to hotspots */
.map-clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  animation: cloudDrift 6s ease-in-out infinite alternate;
}

/* Moon — top-right of globe, ~100px clearance */
.deco-moon {
  position: absolute;
  width: 176px;  /* 4× native 44px */
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  top: 11%;
  right: calc(11% + 100px);
  z-index: 20;
  animation: floatSmooth 4s ease-in-out infinite;
}

/* Satellite — bottom-left corner */
.deco-satellite {
  position: absolute;
  width: 140px;  /* 4× native 35px */
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  bottom: 22%;
  left: 22%;
  z-index: 20;
  animation: floatSmooth 4s ease-in-out infinite;
}

/* Site logo — top-left, offset phase so it drifts independently from the globe */
.site-logo {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 200px;
  pointer-events: none;
  z-index: 20;
  animation: float 3.2s ease-in-out infinite alternate;
  animation-delay: -1.4s;
}

/* HELP! button — top-right */
.help-btn {
  position: absolute;
  top: 5%;
  right: 3%;
  background: rgba(8, 12, 24, 0.75);
  border: 1px solid rgba(240, 228, 200, 0.55);
  padding: 4px 12px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--color-base-cream);
  z-index: 20;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.help-btn:hover,
.help-btn:focus {
  background: rgba(196, 184, 212, 0.25);
  border-color: var(--color-base-cream);
}

/* Arrival dialogue — bottom-right, doesn't overlap hotspot cluster */
.map-dialogue {
  position: absolute;
  right: 3%;
  bottom: 10%;
  background: rgba(8, 12, 24, 0.78);
  border: 1px solid rgba(240, 228, 200, 0.4);
  padding: 10px 14px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.68rem;
  line-height: 1.75;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--color-base-cream);
  max-width: 240px;
  z-index: 15;
}

/* Hotspot labels and page-nav on dark background */
body.map-page .hotspot-label {
  color: var(--color-base-cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

body.map-page .hotspot--locked .hotspot-label {
  color: var(--color-base-cream);
  opacity: 0.45;
}

body.map-page .page-nav {
  background: rgba(8, 12, 24, 0.88);
  border-top-color: rgba(240, 228, 200, 0.2);
}

body.map-page .page-nav a {
  color: var(--color-base-cream);
}

/* ── World map scroll/ribbon banners ─────────────────────────────────
   Each hotspot becomes the scroll center strip; ::before/::after are
   the rolled "ear" ends. The generic .hotspot-shape is hidden.        */

@keyframes scrollGlow {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.12) drop-shadow(0 0 6px rgba(237,220,172,0.5)); }
}

body.map-page a.hotspot {
  /* Override flex column — make the hotspot itself the scroll body */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 31px;
  gap: 0;
  background: #eddcac;
  border-top: 2px solid #5a3010;
  border-bottom: 2px solid #5a3010;
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(90, 48, 16, 0.2);
  animation: scrollGlow 3.5s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

/* Rolled ear ends */
body.map-page a.hotspot::before,
body.map-page a.hotspot::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 16px;
  height: calc(100% + 10px);
  background: #c49838;
  border: 2px solid #5a3010;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0,0,0,0.15);
}
body.map-page a.hotspot::before { left: -16px; }
body.map-page a.hotspot::after  { right: -16px; }

/* Label sits centered inside the scroll strip */
body.map-page .hotspot-label {
  position: relative;
  z-index: 2;
  color: #3a1c06;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Hide the generic box shape — the scroll IS the hotspot now */
body.map-page .hotspot-shape { display: none; }

/* Hover: scale up + glow; cut animation so filter property takes effect */
body.map-page a.hotspot:hover,
body.map-page a.hotspot:focus {
  transform: translate(-50%, -50%) scale(1.12);
  animation: none;
  filter: brightness(1.18) drop-shadow(0 3px 8px rgba(0,0,0,0.45));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(90, 48, 16, 0.2);
  outline: none;
}

/* Locked scroll — faded with dashed border */
body.map-page .hotspot--locked {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 31px;
  gap: 0;
  background: #d4c898;
  border-top: 2px dashed #8a7040;
  border-bottom: 2px dashed #8a7040;
  border-left: none;
  border-right: none;
  opacity: 0.6;
  animation: none;
}
body.map-page .hotspot--locked::before,
body.map-page .hotspot--locked::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 16px;
  height: calc(100% + 10px);
  background: #b09840;
  border: 2px dashed #8a7040;
}
body.map-page .hotspot--locked::before { left: -16px; }
body.map-page .hotspot--locked::after  { right: -16px; }

body.map-page .hotspot--locked .hotspot-shape { display: none; }

body.map-page .hotspot--locked .hotspot-label {
  position: relative;
  z-index: 2;
  color: #5a4820;
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0.8;
}

/* ── Town Square island hotspot ────────────────────────────────────────
   Overrides the scroll-banner style — island image is the visual. */
body.map-page a.hotspot.hotspot--town-square {
  background: none;
  border: none;
  box-shadow: none;
  animation: none;
  width: auto;
  height: auto;
  flex-direction: column;
  gap: 4px;
}

body.map-page a.hotspot.hotspot--town-square::before,
body.map-page a.hotspot.hotspot--town-square::after {
  display: none;
}

body.map-page a.hotspot.hotspot--town-square .hotspot-label {
  color: #ffffff;
  position: static;
}

.hotspot-island {
  width: 92px;   /* 4× native 23px */
  height: auto;
  image-rendering: pixelated;
  display: block;
  transition: transform 0.2s ease;
}

body.map-page a.hotspot.hotspot--town-square:hover,
body.map-page a.hotspot.hotspot--town-square:focus {
  transform: translate(-50%, -50%) scale(1.05);
  animation: none;
  filter: none;
  box-shadow: none;
}

/* ── Mobile breakdown notes (375px) ────────────────────────────────────
   These issues appear at narrow widths and are flagged here rather than
   solved — the intended fix is a help.html place-list below ~480px
   (see site-architecture.md §6, "deferred locations").

   1. LABEL OVERLAP: Town Square (left:37%) and Grand Bazaar (left:59%)
      are ~82px apart center-to-center on a 375px canvas. Hotspot shapes
      are 48px wide (shrunken via media query below), leaving ~34px between
      shape edges — but "town square" and "grand bazaar" labels are ~72px
      and ~68px wide at 0.56rem, so they run into each other.

   2. DIALOGUE/BADGE COLLISION: The .map-dialogue (right:3%, bottom:10%)
      and .avatar-badge (left:4%, bottom:10%) both sit at bottom:10%; at
      375px the dialogue is ~200px wide, which eats into the center and
      pushes toward the badge. Dialogue is hidden below 480px to clear this.

   3. MINES LABEL / HELP BUTTON: The Mines hotspot at left:50% centers at
      187px. The help button sits at right:3% ≈ right edge 364px, left edge
      ~330px. The "the mines" label is ~50px wide centered at 187px —
      no collision. This one is fine.

   4. VERTICAL CROWDING: At canvas height ~330px (375px viewport minus nav),
      The Mines at top:17% = 56px and Town Square at top:62% = 205px are
      149px apart vertically — enough room. Museum at top:45% = 149px sits
      between them comfortably.

   Real fix: below ~480px, consider hiding .map-wrap entirely and showing
   a styled place list (effectively help.html content inline). Do not solve
   here — this note exists so the art handoff doesn't discover this cold.
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hotspot-shape {
    width: 48px;
    height: 32px;
  }

  .hotspot-label {
    font-size: 0.56rem;
  }

  /* Hidden at narrow widths: overlaps avatar badge */
  .map-dialogue {
    display: none;
  }

  .help-btn {
    font-size: 0.6rem;
    padding: 3px 8px;
  }
}