/* ============================================
   LEVEL 5 — The Explorer's Outpost
   Character: Compass
   ============================================ */

/* ── Character name plate ── */
.name-compass {
  color: #e8c070 !important;
  text-shadow: 0 0 8px rgba(232, 192, 112, 0.6);
}

/* ══════════════════════════════════════════
   JIGSAW PUZZLE SCREEN
   ══════════════════════════════════════════ */
.jigsaw-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(0.3rem, 1vh, 0.6rem) clamp(0.5rem, 2vw, 1rem);
  z-index: 10;
}

.jigsaw-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.6rem, 1.5vw, 0.85rem);
  color: #e8c070;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  margin: 0 0 0.2rem;
}

.jigsaw-tracker {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.45rem, 1vw, 0.6rem);
  color: #f0e8d0;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  border: 1px solid rgba(232, 192, 112, 0.3);
  margin-bottom: 0.3rem;
}

.jigsaw-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  /* Use most of the viewport height — leave room for title + tray */
  height: clamp(240px, 58vh, 480px);
  aspect-ratio: 4 / 3;
  background: rgba(40, 30, 20, 0.6);
  border: 2px solid rgba(232, 192, 112, 0.4);
  border-radius: 6px;
  padding: 4px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.jigsaw-slot {
  background: rgba(232, 192, 112, 0.08);
  border: 1px dashed rgba(232, 192, 112, 0.2);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.jigsaw-slot.highlight {
  background: rgba(232, 192, 112, 0.15);
  border-color: rgba(232, 192, 112, 0.5);
}

.jigsaw-slot.filled {
  border-color: rgba(232, 192, 112, 0.6);
  background: transparent;
}

.jigsaw-slot.filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

/* Snap glow animation */
.jigsaw-slot.snap-glow {
  animation: jigsaw-snap 0.5s ease-out;
}

@keyframes jigsaw-snap {
  0% { box-shadow: 0 0 0 0 rgba(232, 192, 112, 0.8); }
  50% { box-shadow: 0 0 12px 4px rgba(232, 192, 112, 0.6); }
  100% { box-shadow: none; }
}

.jigsaw-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 10px);
  margin-top: clamp(0.3rem, 1vh, 0.6rem);
  max-width: 90%;
  min-height: 60px;
}

.jigsaw-piece {
  /* Pieces should be large enough to see detail — roughly 1/4 board width */
  width: clamp(70px, 12vw, 120px);
  aspect-ratio: 4 / 3;
  cursor: grab;
  border-radius: 4px;
  border: 2px solid rgba(232, 192, 112, 0.4);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: rgba(40, 30, 20, 0.8);
}

.jigsaw-piece:hover {
  transform: scale(1.08);
  box-shadow: 0 0 8px rgba(232, 192, 112, 0.5);
}

.jigsaw-piece.selected {
  transform: scale(1.12);
  border-color: #e8c070;
  box-shadow: 0 0 12px rgba(232, 192, 112, 0.7);
}

.jigsaw-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Complete animation */
.jigsaw-board.complete {
  animation: jigsaw-complete 1s ease-out;
  border-color: #e8c070;
  box-shadow: 0 0 30px rgba(232, 192, 112, 0.4);
}

@keyframes jigsaw-complete {
  0% { box-shadow: 0 0 0 0 rgba(232, 192, 112, 0); }
  50% { box-shadow: 0 0 40px 8px rgba(232, 192, 112, 0.7); }
  100% { box-shadow: 0 0 30px rgba(232, 192, 112, 0.4); }
}


/* ══════════════════════════════════════════
   COMPASS CIPHER DECODE SCREEN
   Two-column: compass rose (left) | puzzle interaction (right)
   ══════════════════════════════════════════ */
.compass-decode-content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "title   title"
    "rose    interact"
    "hint    hint";
  align-items: center;
  justify-items: center;
  padding: clamp(0.4rem, 1.5vh, 0.8rem) clamp(0.8rem, 3vw, 1.5rem);
  gap: 0.3rem;
  z-index: 10;
}

.compass-decode-title {
  grid-area: title;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.6rem, 1.4vw, 0.85rem);
  color: #e8c070;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Compass rose — fills left column */
.compass-decode-cipher {
  grid-area: rose;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 70vh;
}

.compass-rose-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(232, 192, 112, 0.3));
}

/* Right column — answer, symbols, buttons stacked vertically, centred alongside compass */
.compass-decode-answer {
  grid-area: interact;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 2vh, 1rem);
  width: 100%;
}

.decode-answer-row {
  display: flex;
  gap: clamp(5px, 1.2vw, 10px);
}

.decode-answer-slot {
  width: clamp(34px, 5.5vw, 50px);
  height: clamp(40px, 6.5vw, 56px);
  border: 2px solid rgba(232, 192, 112, 0.4);
  border-radius: 4px;
  background: rgba(40, 30, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.65rem, 1.4vw, 0.9rem);
  color: #e8c070;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.decode-answer-slot.filled {
  border-color: #70e890;
  color: #70e890;
  transform: scale(1.05);
}

.decode-answer-slot.space {
  border: none;
  background: transparent;
  width: clamp(12px, 2vw, 20px);
}

/* Symbol slots — the 8 arrows to decode */
.compass-decode-symbols {
  display: flex;
  gap: clamp(4px, 1vw, 8px);
  flex-wrap: wrap;
  justify-content: center;
}

.cipher-symbol-slot {
  width: clamp(40px, 6.5vw, 56px);
  height: clamp(40px, 6.5vw, 56px);
  border: 2px solid rgba(232, 192, 112, 0.4);
  border-radius: 6px;
  background: rgba(40, 30, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  color: #e8c070;
}

.cipher-symbol-slot:hover {
  transform: scale(1.08);
}

.cipher-symbol-slot.active {
  border-color: #e8c070;
  background: rgba(20, 14, 8, 0.9);
  color: #fff;
  box-shadow: 0 0 14px rgba(232, 192, 112, 0.6), inset 0 0 6px rgba(232, 192, 112, 0.15);
  transform: scale(1.15);
}

.cipher-symbol-slot.solved {
  border-color: #70e890;
  background: rgba(112, 232, 144, 0.15);
  color: #70e890;
  opacity: 0.6;
}

/* Compass key — direction buttons to tap */
.compass-key-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(5px, 1vw, 10px);
  width: 100%;
  max-width: clamp(240px, 42vw, 380px);
}

.compass-key-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.5rem, 1.1vw, 0.7rem);
  padding: clamp(0.4rem, 1.2vh, 0.7rem) clamp(0.3rem, 0.8vw, 0.5rem);
  background: rgba(40, 30, 20, 0.85);
  border: 2px solid rgba(232, 192, 112, 0.4);
  border-radius: 6px;
  color: #f0e8d0;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.compass-key-btn:hover {
  background: rgba(232, 192, 112, 0.2);
  border-color: rgba(232, 192, 112, 0.7);
  transform: scale(1.08);
}

.compass-key-btn:active {
  transform: scale(0.92);
}

.compass-key-btn.used {
  opacity: 0.3;
  pointer-events: none;
}

.compass-decode-hint {
  grid-area: hint;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.35rem, 0.8vw, 0.5rem);
  color: rgba(240, 232, 208, 0.5);
  text-align: center;
  max-width: 80%;
}


/* ══════════════════════════════════════════
   WAITING SCREEN (real-world adventure)
   ══════════════════════════════════════════ */
.outpost-waiting-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(1rem, 4vh, 2rem);
  z-index: 10;
}

.outpost-waiting-compass {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  height: 28%;
  image-rendering: pixelated;
  animation: compass-pace 6s ease-in-out infinite;
}

.outpost-waiting-compass img {
  height: 100%;
  width: auto;
  image-rendering: pixelated;
}

@keyframes compass-pace {
  0%, 100% { left: 30%; transform: translateX(-50%) scaleX(1); }
  45% { left: 70%; transform: translateX(-50%) scaleX(1); }
  50% { left: 70%; transform: translateX(-50%) scaleX(-1); }
  95% { left: 30%; transform: translateX(-50%) scaleX(-1); }
}

/* Perk up — pacing pauses in place and Compass does a quick double hop
   (class toggled by a JS interval in level-5.js) */
.outpost-waiting-compass.perk-up {
  animation-play-state: paused;
}

.outpost-waiting-compass.perk-up img {
  animation: compass-perk-hop 0.9s ease-in-out;
}

@keyframes compass-perk-hop {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-12px); }
  45% { transform: translateY(0); }
  60% { transform: translateY(-6px); }
  80% { transform: translateY(0); }
}

.outpost-waiting-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 15;
}

.outpost-waiting-text {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.5rem, 1.2vw, 0.7rem);
  color: #e8c070;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* "Adventure in progress" pulse — soft gold dot signalling the game is alive */
.outpost-waiting-text::before {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: #e8c070;
  vertical-align: middle;
  animation: waiting-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes waiting-dot-pulse {
  0%, 100% { opacity: 0.35; box-shadow: 0 0 0 0 rgba(232, 192, 112, 0); }
  50% { opacity: 1; box-shadow: 0 0 8px 2px rgba(232, 192, 112, 0.5); }
}

.outpost-waiting-quote {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.4rem, 1vw, 0.55rem);
  color: rgba(240, 232, 208, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-align: center;
  max-width: 80%;
  min-height: 2.5em;
  transition: opacity 0.5s ease;
  line-height: 1.6;
}

.outpost-waiting-quote.fade-out {
  opacity: 0;
}


/* ══════════════════════════════════════════
   EXPLORATION HOTSPOTS (Level 5 outpost)
   ══════════════════════════════════════════ */
.outpost-hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 20;
  transition: transform 0.2s ease;
}

.outpost-hotspot:hover {
  transform: scale(1.1);
}

/* Pixel-art prop sprite that sits in the scene like a real object,
   with a gentle golden glow pulse inviting a tap */
.outpost-hotspot-img {
  width: clamp(56px, 9vw, 88px);
  height: auto;
  display: block;
  image-rendering: pixelated;
  animation: hotspot-pulse 2s ease-in-out infinite;
}

@keyframes hotspot-pulse {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 2px rgba(232, 192, 112, 0)); }
  50%      { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(232, 192, 112, 0.75)); }
}

/* Telescope zoom-in overlay */
.telescope-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.telescope-overlay.visible {
  opacity: 1;
}

.telescope-overlay img {
  max-width: 70%;
  max-height: 70%;
  image-rendering: pixelated;
  border-radius: 50%;
  border: 3px solid rgba(232, 192, 112, 0.5);
}

.telescope-hint {
  position: absolute;
  bottom: 10%;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.35rem, 0.8vw, 0.5rem);
  color: rgba(240, 232, 208, 0.5);
}