:root {
  --color-base-sage:         #B8C99A;
  --color-base-cream:        #F0E4C8;
  --color-base-lavender:     #C4B8D4;
  --color-accent-pink:       #F2A6C4;
  --color-accent-cornflower: #7EB8D9;
  --color-accent-terracotta: #D97F4A;
  --color-accent-mustard:    #E8B84A;
  --color-ink:               #1a1a2e;
}

@font-face {
  font-family: 'early_gameboy';
  src: url('../assets/final/v1-assets/early-gameboy-font-kit/early_gameboy.woff2') format('woff2'),
       url('../assets/final/v1-assets/early-gameboy-font-kit/early_gameboy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

@keyframes floatSmooth {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: var(--color-base-cream);
  color: var(--color-ink);
  font-family: 'Pixelify Sans', sans-serif;
}

h1, h2, h3 {
  font-family: 'early_gameboy', monospace;
}

/* ── Hotspots (shared: world map + region mini-maps) ── */

.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  z-index: 10;
}

.hotspot-shape {
  width: 64px;
  height: 40px;
  border: 2px solid var(--color-ink);
  border-radius: 4px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

a.hotspot:hover .hotspot-shape,
a.hotspot:focus .hotspot-shape {
  transform: scale(1.12);
  box-shadow: 2px 2px 0 var(--color-ink);
  outline: none;
}

a.hotspot:focus-visible {
  outline: none;
}

a.hotspot:focus-visible .hotspot-shape {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.hotspot-label {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--color-ink);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

/* Region fill colors */
.hotspot--museum      .hotspot-shape { background: var(--color-accent-cornflower); }
.hotspot--mines       .hotspot-shape { background: var(--color-base-lavender); }
.hotspot--town-square .hotspot-shape { background: var(--color-accent-pink); }
.hotspot--bazaar      .hotspot-shape { background: var(--color-accent-mustard); }

/* Sub-location fill colors — The Mines */
.hotspot--lab    .hotspot-shape { background: var(--color-accent-mustard); }
.hotspot--quarry .hotspot-shape { background: var(--color-base-lavender); }
.hotspot--gems   .hotspot-shape { background: var(--color-accent-cornflower); }

/* Sub-location fill colors — Town Square */
.hotspot--press       .hotspot-shape { background: var(--color-accent-terracotta); }
.hotspot--post-office .hotspot-shape { background: var(--color-accent-pink); }

/* Locked hotspot (not an <a> — no pointer, no nav) */
.hotspot--locked {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: default;
  z-index: 10;
}

.hotspot--locked .hotspot-shape {
  background: var(--color-base-sage);
  opacity: 0.55;
  border-style: dashed;
}

.hotspot--locked .hotspot-label {
  opacity: 0.65;
}

/* Tooltip (CSS-only, appears on hover/focus of locked parent) */
.hotspot-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-base-cream);
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.hotspot--locked:hover .hotspot-tooltip,
.hotspot--locked:focus .hotspot-tooltip {
  opacity: 1;
}

/* ── Persistent nav strip (fixed, every page) ── */

.page-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.45rem 1rem;
  background: rgba(240, 228, 200, 0.94);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--color-base-lavender);
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  z-index: 200;
}

.page-nav a {
  color: var(--color-ink);
  text-decoration: none;
  text-transform: lowercase;
}

.page-nav a:hover {
  text-decoration: underline;
}