/* ============================================
   FOREST EXPLORATION — Level 1 multi-screen
   Covers: exploration, cipher search, decode,
   and letter ordering phases
   ============================================ */

/* ============================================
   Exploration Screen
   ============================================ */
#screen-exploration {
  background: #0a1008;
}

.forest-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.forest-panels {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.forest-panels.no-transition {
  transition: none;
}

.forest-panel {
  width: calc(100% / 3);
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.forest-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Interactive Hotspots ---- */
.hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.hotspot:active {
  transform: scale(0.95);
}

/* Symbol tree hotspots — visible golden glow over symbol carvings */
.hotspot-symbol {
  width: clamp(56px, 11vw, 86px);
  height: clamp(56px, 11vw, 86px);
  border-radius: 50%;
}

/* Visible golden glow marker on undiscovered symbols */
.hotspot-symbol:not(.found)::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 136, 0.55) 0%, rgba(218, 186, 106, 0.25) 50%, transparent 75%);
  animation: symbol-glow-pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Outer shimmer ring on undiscovered symbols */
.hotspot-symbol:not(.found)::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(218, 186, 106, 0.4);
  background: radial-gradient(circle, rgba(218, 186, 106, 0.12) 0%, transparent 70%);
  animation: symbol-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes symbol-glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes symbol-shimmer {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Hide glow markers once found */
.hotspot-symbol.found::before,
.hotspot-symbol.found::after {
  display: none;
}

/* Symbol reveal — shown after tapping */
.symbol-reveal {
  position: absolute;
  inset: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  z-index: 11;
}

.hotspot-symbol.found .symbol-reveal {
  opacity: 1;
  transform: scale(1);
  animation: symbol-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes symbol-appear {
  0% { opacity: 0; transform: scale(0.3); filter: brightness(3); }
  50% { opacity: 1; transform: scale(1.2); filter: brightness(1.5); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

.symbol-reveal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(218, 186, 106, 0.8));
}

.symbol-numeral {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: clamp(0.55rem, 1.6vw, 0.75rem);
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(218, 186, 106, 0.9), 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap;
  background: rgba(10, 14, 20, 0.6);
  padding: 0.15em 0.4em;
  border-radius: 2px;
}

/* Golden glow burst when symbol is first discovered */
.symbol-glow-burst {
  position: absolute;
  inset: -30px;
  pointer-events: none;
  z-index: 12;
  animation: glow-burst 0.8s ease-out forwards;
}

@keyframes glow-burst {
  0% { opacity: 1; transform: scale(0.3); }
  40% { opacity: 0.8; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2); }
}

.symbol-glow-burst::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 136, 0.6) 0%, rgba(218, 186, 106, 0.2) 40%, transparent 70%);
}

/* Atmospheric hotspots (mushroom, bush, rock, bird) */
.hotspot-atmosphere {
  width: clamp(44px, 9vw, 74px);
  height: clamp(44px, 9vw, 74px);
  overflow: visible;
}

/* Sprite image inside atmospheric hotspots */
.hotspot-atmosphere .atm-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Idle bob on mushrooms */
.hotspot-mushroom .atm-sprite {
  animation: mushroom-idle 4s ease-in-out infinite;
}

@keyframes mushroom-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Idle sway on bushes */
.hotspot-bush .atm-sprite {
  animation: bush-idle 5s ease-in-out infinite;
}

@keyframes bush-idle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

/* Idle twitch on bird */
.hotspot-bird .atm-sprite {
  animation: bird-idle 3s ease-in-out infinite;
}

@keyframes bird-idle {
  0%, 85%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-5deg); }
  95% { transform: rotate(3deg); }
}

/* Rock — larger hitbox since the sprite is wider than tall */
.hotspot-rock {
  width: clamp(70px, 14vw, 120px);
  height: clamp(50px, 10vw, 85px);
}

/* Rock idle — subtle wobble */
.hotspot-rock .atm-sprite {
  animation: rock-idle 6s ease-in-out infinite;
}

@keyframes rock-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

/* CSS-only bush sprite — layered green foliage */
.atm-bush-sprite {
  width: 100%;
  height: 100%;
  position: relative;
}

.atm-bush-sprite::before {
  content: '';
  position: absolute;
  inset: 10% 5% 15% 5%;
  border-radius: 55% 50% 48% 52% / 60% 62% 45% 50%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(100, 170, 50, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 35%, rgba(80, 150, 40, 0.85) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 60%, #3a6a2a 0%, #2a5020 80%);
  box-shadow:
    inset 0 4px 8px rgba(120, 200, 60, 0.25),
    inset 0 -6px 10px rgba(0, 0, 0, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

.atm-bush-sprite::after {
  content: '';
  position: absolute;
  inset: 5% 15% 25% 10%;
  border-radius: 45% 55% 50% 50% / 55% 50% 55% 50%;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(130, 195, 70, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 45%, rgba(90, 160, 50, 0.4) 0%, transparent 45%);
}

/* CSS-only rock sprite — natural stone shape */
.atm-rock-sprite {
  width: 100%;
  height: 80%;
  margin-top: 20%;
  position: relative;
}

.atm-rock-sprite::before {
  content: '';
  position: absolute;
  inset: 8% 3% 5% 3%;
  border-radius: 38% 52% 48% 42% / 45% 40% 55% 50%;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(155, 150, 140, 0.9) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 40%, rgba(130, 125, 115, 0.7) 0%, transparent 45%),
    linear-gradient(160deg, #8a8578 0%, #6a655a 40%, #4a4840 100%);
  box-shadow:
    inset 0 3px 5px rgba(180, 175, 165, 0.3),
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.45);
}

.atm-rock-sprite::after {
  content: '';
  position: absolute;
  inset: 15% 15% 30% 8%;
  border-radius: 30% 50% 40% 35%;
  background: linear-gradient(135deg, rgba(180, 175, 165, 0.25) 0%, transparent 60%);
}

/* Mushroom bounce */
.hotspot-mushroom.bounce {
  animation: mushroom-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mushroom-bounce {
  0% { transform: translateY(0) scaleY(1) scaleX(1); }
  20% { transform: translateY(4px) scaleY(0.85) scaleX(1.15); }
  50% { transform: translateY(-15px) scaleY(1.1) scaleX(0.9); }
  70% { transform: translateY(0) scaleY(0.95) scaleX(1.05); }
  100% { transform: translateY(0) scaleY(1) scaleX(1); }
}

/* Bush firefly scatter */
.hotspot-bush.scatter .firefly-particle {
  animation: firefly-scatter 1.2s ease-out forwards;
}

.firefly-particle {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8c4 0%, #ffe888 30%, rgba(255, 232, 136, 0.5) 60%, transparent 100%);
  box-shadow: 0 0 14px 4px rgba(255, 232, 136, 0.9), 0 0 28px 8px rgba(255, 210, 80, 0.4);
  pointer-events: none;
  opacity: 0;
}

@keyframes firefly-scatter {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15% { opacity: 1; transform: scale(1.2); }
  40% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}

/* Bird flight */
.hotspot-bird.fly-away {
  animation: bird-fly 1s ease-in forwards;
}

@keyframes bird-fly {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  30% { transform: translate(-10px, -20px) rotate(-10deg); opacity: 1; }
  100% { transform: translate(-100px, -150px) rotate(-15deg); opacity: 0; }
}

/* Rock — bug scurry */
.bug-sprite {
  position: absolute;
  width: 14px;
  height: 10px;
  background: #3a2a1a;
  border-radius: 40% 40% 50% 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Legs — tiny lines on each side */
.bug-sprite::before,
.bug-sprite::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 1px;
  background: #3a2a1a;
}
.bug-sprite::before { left: -3px; transform: rotate(-25deg); }
.bug-sprite::after { right: -3px; transform: rotate(25deg); }

.bug-sprite.scurry {
  animation: bug-scurry 0.9s cubic-bezier(0.2, 0, 0.8, 1) forwards;
}

@keyframes bug-scurry {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8% { opacity: 1; }
  20% { transform: translate(12px, -4px) rotate(5deg); }
  40% { transform: translate(28px, 6px) rotate(-3deg); }
  60% { transform: translate(50px, -2px) rotate(4deg); }
  80% { opacity: 0.8; transform: translate(75px, 10px) rotate(-2deg); }
  100% { opacity: 0; transform: translate(100px, 15px) rotate(0deg); }
}

/* ---- Navigation Arrows ---- */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: clamp(36px, 6vw, 48px);
  height: clamp(60px, 12vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--gold-bright);
  background: rgba(10, 14, 20, 0.5);
  border: 2px solid rgba(218, 186, 106, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  animation: arrow-pulse 2s ease-in-out infinite;
}

.nav-arrow:hover, .nav-arrow:active {
  background: rgba(58, 90, 42, 0.6);
  border-color: var(--gold);
}

.nav-left {
  left: 0.5rem;
  border-radius: 0 4px 4px 0;
}

.nav-right {
  right: 0.5rem;
  border-radius: 4px 0 0 4px;
}

@keyframes arrow-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---- Symbol Tracker ---- */
.symbol-tracker {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 25;
  font-family: var(--font-pixel);
  font-size: clamp(0.4rem, 1.2vw, 0.55rem);
  color: var(--gold-bright);
  background: rgba(10, 14, 20, 0.8);
  border: 2px solid var(--gold-dark);
  padding: 0.5em 0.8em;
  border-radius: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.tracker-icon {
  color: var(--gold);
}

.symbol-tracker.tracker-pulse {
  animation: tracker-update 0.4s ease-out;
}

@keyframes tracker-update {
  0% { transform: scale(1); border-color: var(--gold-dark); }
  50% { transform: scale(1.1); border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(218, 186, 106, 0.5); }
  100% { transform: scale(1); border-color: var(--gold-dark); }
}

/* ---- Exploration Fern (small, bottom-left) ---- */
.exploration-fern {
  position: absolute;
  bottom: 16%;
  left: 8%;
  height: 22%;
  z-index: 8;
  pointer-events: none;
  image-rendering: pixelated;
  transition: opacity 0.5s ease;
}

.exploration-fern img {
  height: 100%;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* ============================================
   Cipher Search Screen (real-world waiting)
   ============================================ */
#screen-cipher-search {
  background: #0a1008;
}

.cipher-search-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

.cipher-search-fern {
  width: clamp(120px, 25vw, 200px);
  image-rendering: pixelated;
  animation: fern-wait 3s ease-in-out infinite;
}

.cipher-search-fern img {
  width: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

@keyframes fern-wait {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.cipher-search-message {
  /* Ornate gold double-frame, matching the dialogue box */
  background: rgba(12, 16, 22, 0.88);
  border: 3px solid #c5952e;
  box-shadow:
    inset 0 0 0 2px rgba(8, 10, 16, 0.9),
    inset 0 0 0 4px #8a6518,
    inset 0 0 16px rgba(160, 120, 40, 0.06),
    0 0 0 2px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(160, 120, 40, 0.12),
    0 0 24px rgba(0, 0, 0, 0.5);
  padding: 1.5rem;
  border-radius: 4px;
  max-width: 500px;
}

.cipher-search-text {
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1.4vw, 0.65rem);
  color: var(--text-light);
  line-height: 2;
  margin-bottom: 1rem;
}

.cipher-search-hint {
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1.5vw, 0.7rem);
  color: var(--text-highlight);
  line-height: 2;
  margin-bottom: 1.5rem;
}

/* ============================================
   Decode Screen (symbol → letter matching)
   ============================================ */
#screen-decode {
  background: #0a1008;
}

.decode-content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 1rem;
  width: 95%;
  max-width: 650px;

  /* Ornate gold double-frame on weathered dark stone */
  background:
    linear-gradient(160deg, rgba(70, 70, 62, 0.18), rgba(20, 22, 18, 0.1) 55%, rgba(0, 0, 0, 0.22)),
    rgba(12, 16, 22, 0.88);
  border: 3px solid #c5952e;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px rgba(8, 10, 16, 0.9),
    inset 0 0 0 4px #8a6518,
    inset 0 0 16px rgba(160, 120, 40, 0.06),
    0 0 0 2px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(160, 120, 40, 0.12),
    0 0 24px rgba(0, 0, 0, 0.5);
}

.decode-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1.5vw, 0.7rem);
  color: var(--gold-bright);
  margin-bottom: 1rem;
  line-height: 1.8;
}

.decode-symbols {
  display: flex;
  justify-content: center;
  gap: clamp(0.3rem, 1.5vw, 0.6rem);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.decode-symbol-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.decode-symbol-card:active {
  transform: scale(0.95);
}

.decode-symbol-card.selected {
  transform: scale(1.05);
}

.decode-symbol-img {
  width: clamp(44px, 9vw, 64px);
  height: clamp(44px, 9vw, 64px);
  /* Carved stone tablet */
  background: linear-gradient(180deg, #5a5a52 0%, #4a4a42 45%, #3a3a34 100%);
  border: 2px solid #2a2a24;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
  box-shadow:
    /* Chiseled edges: top-light catch, bottom-dark cut */
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    inset 2px 0 0 rgba(255, 255, 255, 0.06),
    inset -2px 0 0 rgba(0, 0, 0, 0.25),
    /* Engraved glyph recess */
    inset 0 0 10px rgba(0, 0, 0, 0.55),
    /* Sits on the panel */
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.decode-symbol-card.selected .decode-symbol-img {
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 10px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(255, 232, 136, 0.5);
}

.decode-symbol-card.decoded .decode-symbol-img {
  border-color: var(--success-green);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 10px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(88, 162, 72, 0.4);
}

.decode-symbol-img img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  image-rendering: pixelated;
}

.decode-symbol-numeral {
  font-family: var(--font-pixel);
  font-size: clamp(0.35rem, 0.9vw, 0.45rem);
  color: var(--gold);
  opacity: 0.7;
  /* Carved-into-stone look */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.1);
}

.decode-letter-box {
  width: clamp(28px, 6vw, 40px);
  height: clamp(28px, 6vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: clamp(0.6rem, 2vw, 0.9rem);
  color: var(--gold-bright);
  /* Engraved recess in the stone */
  background: linear-gradient(180deg, #23231e 0%, #2e2e28 60%, #34342e 100%);
  border: 2px solid #1c1c18;
  border-radius: 3px;
  text-transform: uppercase;
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.decode-symbol-card.decoded .decode-letter-box {
  /* Filled: the carved letter glows gold-warm (green trim = correct) */
  border-color: var(--success-green);
  color: var(--success-green);
  background: linear-gradient(180deg, #24301e 0%, #2c3a24 100%);
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.5),
    inset 0 0 8px rgba(218, 186, 106, 0.25),
    0 0 8px rgba(88, 162, 72, 0.35);
}

.decode-symbol-card.selected .decode-letter-box {
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.55),
    inset 0 0 8px rgba(218, 186, 106, 0.3),
    0 0 10px rgba(255, 232, 136, 0.35);
  animation: cursor-blink 0.8s step-end infinite;
}

/* Shake animation for wrong letter input */
.decode-symbol-card.decode-shake {
  animation: decode-shake 0.4s ease;
}

@keyframes decode-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* Decode keyboard — compact letter grid */
.decode-keyboard {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.decode-key-row {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
}

.decode-key {
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1.5vw, 0.7rem);
  width: clamp(28px, 6vw, 38px);
  height: clamp(32px, 7vw, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Small runestone key */
  background: linear-gradient(180deg, #5a5a52 0%, #4a4a42 50%, #3a3a34 100%);
  border: 2px solid #2a2a24;
  border-radius: 3px;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 #1f1f1a,
    0 4px 4px rgba(0, 0, 0, 0.4);
  transition:
    background 0.1s ease,
    border-color 0.1s ease,
    color 0.1s ease,
    box-shadow 0.08s ease-out,
    transform 0.08s ease-out,
    filter 0.08s ease-out;
  user-select: none;
  -webkit-user-select: none;
}

.decode-key:hover {
  filter: brightness(1.15);
  border-color: #6a5a2a;
  color: var(--gold-bright);
}

.decode-key:active {
  background: linear-gradient(180deg, #4a4a42 0%, #3a3a34 100%);
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 0 #1f1f1a,
    0 2px 3px rgba(0, 0, 0, 0.4);
}

/* Worn / spent keys (button disabled state) */
.decode-key:disabled,
.decode-key.used {
  filter: grayscale(0.4) brightness(0.7);
  color: rgba(218, 186, 106, 0.4);
  border-color: #232320;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 0 #1f1f1a;
  cursor: default;
}

.decode-key-backspace {
  width: clamp(50px, 10vw, 65px);
  font-size: clamp(0.4rem, 1.2vw, 0.55rem);
  background: linear-gradient(180deg, #5c4640 0%, #4a3834 50%, #382a28 100%);
  border-color: #2e2220;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 #20161a,
    0 4px 4px rgba(0, 0, 0, 0.4);
}

.decode-hint {
  font-family: var(--font-pixel);
  font-size: clamp(0.35rem, 1vw, 0.5rem);
  color: var(--text-light);
  opacity: 0.6;
  line-height: 1.8;
  margin-top: 0.3rem;
}

/* ============================================
   Letter Ordering Screen
   ============================================ */
#screen-order {
  background: #0a1008;
}

.order-content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 1.5rem;
  width: 95%;
  max-width: 600px;

  /* Ornate gold double-frame on weathered dark stone */
  background:
    linear-gradient(160deg, rgba(70, 70, 62, 0.18), rgba(20, 22, 18, 0.1) 55%, rgba(0, 0, 0, 0.22)),
    rgba(12, 16, 22, 0.88);
  border: 3px solid #c5952e;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px rgba(8, 10, 16, 0.9),
    inset 0 0 0 4px #8a6518,
    inset 0 0 16px rgba(160, 120, 40, 0.06),
    0 0 0 2px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(160, 120, 40, 0.12),
    0 0 24px rgba(0, 0, 0, 0.5);
}

.order-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1.5vw, 0.7rem);
  color: var(--gold-bright);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* Target slots — numbered I through VI */
.order-slots {
  display: flex;
  justify-content: center;
  gap: clamp(0.3rem, 1.5vw, 0.6rem);
  margin-bottom: 2rem;
}

.order-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.order-slot:active {
  transform: scale(0.95);
}

.order-slot-box {
  width: clamp(40px, 8vw, 56px);
  height: clamp(46px, 9vw, 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: clamp(0.8rem, 2.5vw, 1.2rem);
  color: var(--gold-bright);
  /* Engraved recess chiseled into the stone panel */
  background: linear-gradient(180deg, #22221d 0%, #2c2c26 60%, #34342e 100%);
  border: 2px solid #1c1c18;
  border-bottom-width: 4px;
  border-radius: 3px;
  text-transform: uppercase;
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.order-slot.filled .order-slot-box {
  /* Filled: the recess glows warm gold */
  border-color: var(--gold);
  background: linear-gradient(180deg, #2e2616 0%, #3a3020 100%);
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, 0.45),
    inset 0 0 10px rgba(218, 186, 106, 0.25),
    0 0 8px rgba(218, 186, 106, 0.3);
}

.order-slot.selected .order-slot-box {
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(255, 232, 136, 0.2),
    0 0 12px rgba(255, 232, 136, 0.5);
}

.order-slot-numeral {
  font-family: var(--font-pixel);
  font-size: clamp(0.4rem, 1.2vw, 0.55rem);
  color: var(--gold);
  /* Carved-into-stone look */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Source tiles — letters to place */
.order-tiles {
  display: flex;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 0.8rem);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.order-tile {
  width: clamp(44px, 9vw, 60px);
  height: clamp(50px, 10vw, 66px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: clamp(0.9rem, 3vw, 1.3rem);
  color: var(--gold-bright);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  /* Runestone tile: stone face with chiseled edges and 3D depth */
  background: linear-gradient(180deg, #5a5a52 0%, #4a4a42 50%, #3a3a34 100%);
  border: 3px solid var(--gold);
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.1s ease-out,
    transform 0.15s ease,
    opacity 0.15s ease,
    filter 0.1s ease-out;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 4px 0 #1f1f1a,
    0 6px 8px rgba(0, 0, 0, 0.45);
}

.order-tile:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 2px 0 #1f1f1a,
    0 3px 5px rgba(0, 0, 0, 0.45);
}

.order-tile.selected {
  border-color: var(--gold-bright);
  transform: scale(1.1) translateY(-4px);
  background: linear-gradient(180deg, #6a6256 0%, #564e42 50%, #443e34 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 10px rgba(218, 186, 106, 0.2),
    0 5px 0 #1f1f1a,
    0 0 15px rgba(255, 232, 136, 0.6);
}

.order-tile.placed {
  opacity: 0.3;
  pointer-events: none;
  transform: scale(0.9);
  filter: grayscale(0.5);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    0 2px 0 #1f1f1a;
}

.order-hint {
  font-family: var(--font-pixel);
  font-size: clamp(0.35rem, 1vw, 0.5rem);
  color: var(--text-light);
  opacity: 0.6;
  line-height: 1.8;
}

/* Success glow on completed word */
.order-slots.complete .order-slot-box {
  border-color: var(--success-green);
  color: var(--success-green);
  box-shadow: 0 0 12px rgba(88, 162, 72, 0.5);
  animation: order-complete-pulse 0.5s ease-out;
}

@keyframes order-complete-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Wrong order — shake the whole slot row */
.order-slots.order-shake {
  animation: order-shake 0.5s ease;
}

.order-slots.order-shake .order-slot-box {
  border-color: #c94040;
  color: #c94040;
  box-shadow: 0 0 10px rgba(201, 64, 64, 0.4);
}

@keyframes order-shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(8px); }
  45%      { transform: translateX(-6px); }
  60%      { transform: translateX(6px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}

/* ============================================
   Ambient Firefly Animation (overlay)
   ============================================ */
.ambient-firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 136, 0.9) 0%, rgba(255, 232, 136, 0.3) 50%, transparent 100%);
  box-shadow: 0 0 6px rgba(255, 232, 136, 0.6);
  pointer-events: none;
  z-index: 6;
  animation: firefly-drift var(--drift-duration, 8s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
}

@keyframes firefly-drift {
  0% { transform: translate(0, 0); opacity: 0.2; }
  25% { transform: translate(var(--dx1, 15px), var(--dy1, -20px)); opacity: 0.8; }
  50% { transform: translate(var(--dx2, -10px), var(--dy2, -30px)); opacity: 0.4; }
  75% { transform: translate(var(--dx3, 20px), var(--dy3, -10px)); opacity: 0.9; }
  100% { transform: translate(0, 0); opacity: 0.2; }
}

/* ============================================
   Leaf particle animation (overlay)
   ============================================ */
.ambient-leaf {
  position: absolute;
  width: 8px;
  height: 6px;
  background: rgba(120, 160, 60, 0.6);
  border-radius: 0 50% 50% 50%;
  pointer-events: none;
  z-index: 6;
  animation: leaf-fall var(--fall-duration, 6s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
}

@keyframes leaf-fall {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  100% { transform: translate(var(--leaf-dx, 30px), calc(100vh + 20px)) rotate(var(--leaf-rot, 360deg)); opacity: 0; }
}