/* ========================================
   Discover Me Section - Playful Retro Design
   ======================================== */

.section-discover {
  min-height: 530vh;
  background: #16161a;
  padding: 0;
  position: relative;
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Zones container - transitions provide spacing */
.discover-zones-container {
  min-height: 530vh;
  position: relative;
  background:
    /* Double-sized grid pattern (32px instead of 16px from dirt) */ repeating-linear-gradient(
      0deg,
      transparent,
      transparent 32px,
      #49495f 32px,
      #49495f 34px
    ),
    repeating-linear-gradient(90deg, transparent, transparent 32px, #49495f 32px, #49495f 34px);
}

/* Individual zone layout - transitions provide spacing */
.discover-zone {
  min-height: 110vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4rem 6rem;
  overflow: hidden;
}

/* Zone 1 - Sun Theme */
.zone-1 {
  background: linear-gradient(180deg, #5c94fc 0%, #88c0d0 100%);
}

/* Zone 2 - Mountain Range Theme */
.zone-2.zone-mountains {
  background: linear-gradient(180deg, #87ceeb 0%, #5c94fc 100%);
}

/* Zone 3 - Forest Cabin Night Theme */
.zone-3.zone-cabin {
  background: linear-gradient(180deg, #2c3e50 0%, #1a1a2e 100%);
}

/* Zone 1 - Ground/grass platform with layered soil */
.zone-1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 41%;
  background:
    /* Pixel dot texture pattern */ repeating-linear-gradient(
      0deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.1) 16px,
      rgba(0, 0, 0, 0.1) 18px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.05) 16px,
      rgba(0, 0, 0, 0.05) 18px
    ),
    /* Layered soil gradient */
      linear-gradient(
        to bottom,
        #8b4513 0%,
        #8b4513 20%,
        #7a3d0f 20%,
        #7a3d0f 40%,
        #6b3410 40%,
        #6b3410 60%,
        #5c2d0f 60%,
        #5c2d0f 80%,
        #4d260e 80%,
        #4d260e 100%
      );
  border-top: 8px solid #00a800;
  box-shadow: inset 0 8px 0 #00c000, inset 0 4px 0 #00d000;
  z-index: 0;
}

/* Sun in Zone 1 */
.sun-1 {
  position: absolute;
  top: 8%;
  left: 25%;
  width: 100px;
  height: 100px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5),
    0 0 90px rgba(255, 215, 0, 0.3);
  z-index: 1;
  animation: sunGlow 4s ease-in-out infinite;
}

@keyframes sunGlow {
  0%,
  100% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5),
      0 0 90px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.7),
      0 0 120px rgba(255, 215, 0, 0.4);
  }
}

/* Pixel art clouds in Zone 1 */
.zone-1 .section-container::before,
.zone-1 .section-container::after {
  content: '';
  position: absolute;
  background: white;
  z-index: 0;
  box-shadow: 0 0 0 16px white, 16px 0 0 16px white, -16px 0 0 16px white, 0 -16px 0 8px white,
    16px -16px 0 8px white, 32px 0 0 8px white, -32px 0 0 8px white;
  animation: cloudFloat 50s linear infinite;
}

.zone-1 .section-container::before {
  top: 10%;
  left: -100px;
  width: 16px;
  height: 16px;
}

.zone-1 .section-container::after {
  top: 35%;
  left: -150px;
  width: 16px;
  height: 16px;
  animation-duration: 30s;
  animation-delay: 5s;
}

@keyframes cloudFloat {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100vw + 200px));
  }
}

/* Pixel art question blocks */
.pixel-block {
  position: absolute;
  width: 48px;
  height: 48px;
  background: linear-gradient(to bottom, #f8b800 0%, #d89000 100%);
  border: 4px solid #000;
  box-shadow: inset 4px 4px 0 #ffd800, inset -4px -4px 0 #b87000;
  z-index: 2;
  image-rendering: pixelated;
  pointer-events: none; /* Default non-interactive, overridden by [data-fact="true"] */
}

.pixel-block::before {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-typewriter);
  font-weight: 400;
  font-size: var(--font-size-3xl);
  color: #000;
}

.pixel-block-1 {
  top: 25%;
  left: 10%;
  animation: blockBounce 2s ease-in-out infinite;
}

.pixel-block-2 {
  top: 40%;
  right: 15%;
  animation: blockBounce 2s ease-in-out infinite 0.5s;
}

.pixel-block-3 {
  top: 15%;
  right: 8%;
  animation: blockBounce 2s ease-in-out infinite 1s;
}

/* Zone 2 - Mountain Range: Different block positions */
.zone-2 .pixel-block-1 {
  top: 13%;
  left: 8%;
}

.zone-2 .pixel-block-2 {
  top: 23%;
  right: 10%;
}

.zone-2 .pixel-block-3 {
  top: 17%;
  right: 3%;
}

/* Zone 3 - Forest Cabin Night: Different block positions */
.zone-3 .pixel-block-1 {
  top: 25%;
  left: 8%;
}

.zone-3 .pixel-block-2 {
  top: 35%;
  right: 10%;
}

.zone-3 .pixel-block-3 {
  top: 30%;
  left: 25%;
}

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

/* Pixel art bushes */
.pixel-bush {
  position: absolute;
  width: 64px;
  height: 48px;
  background: #00a800;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  z-index: 1;
  bottom: 41%;
  box-shadow: 0 0 0 4px #008000, inset 0 -8px 0 #007000;
  pointer-events: none; /* Don't interfere with clicking */
}

.pixel-bush::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: #00c000;
  border-radius: 50%;
  top: -8px;
  left: 16px;
}

.pixel-bush-1 {
  left: 5%;
}

.pixel-bush-2 {
  right: 12%;
}

/* Pixel rocks in the dirt */
.pixel-rock {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #5c5c5c;
  border-radius: 4px;
  z-index: 1;
  box-shadow: inset 4px 4px 0 #7a7a7a, inset -4px -4px 0 #3a3a3a, 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.pixel-rock::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #8a8a8a;
  top: 4px;
  left: 4px;
  border-radius: 2px;
}

.pixel-rock-1 {
  bottom: 25%;
  left: 15%;
  width: 32px;
  height: 32px;
}

.pixel-rock-2 {
  bottom: 6%;
  left: 25%;
  width: 20px;
  height: 20px;
}

.pixel-rock-3 {
  bottom: 10%;
  left: 55%;
  width: 28px;
  height: 28px;
}

.pixel-rock-4 {
  bottom: 8%;
  left: 85%;
  width: 24px;
  height: 24px;
}

/* Pixel character running */
.pixel-character {
  position: absolute;
  bottom: 41%;
  left: -80px;
  width: 48px;
  height: 64px;
  z-index: 3;
  animation: characterRun 15s linear infinite;
  image-rendering: pixelated;
}

/* Pixel character design */
.pixel-character::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  box-shadow:
    /* Red cap/hat - row 1 */ 8px 0 0 0 #e60000, 16px 0 0 0 #e60000, 24px 0 0 0 #e60000,
    /* Cap brim - row 2 */ 8px 8px 0 0 #ff6b6b, 16px 8px 0 0 #e60000, 24px 8px 0 0 #ff6b6b,
    /* Face - row 3 */ 8px 16px 0 0 #ffd1b3, 16px 16px 0 0 #ffd1b3, 24px 16px 0 0 #ffd1b3,
    /* Eyes - row 3 */ 12px 16px 0 0 #000, 20px 16px 0 0 #000,
    /* Body shirt - row 4 */ 0 24px 0 0 #0066ff, 8px 24px 0 0 #0066ff, 16px 24px 0 0 #0066ff,
    24px 24px 0 0 #0066ff, 32px 24px 0 0 #0066ff, /* Shirt details - row 5 */ 0 32px 0 0 #0066ff,
    8px 32px 0 0 #4d94ff, 16px 32px 0 0 #0066ff, 24px 32px 0 0 #4d94ff, 32px 32px 0 0 #0066ff,
    /* Pants - row 6 */ 8px 40px 0 0 #8b4513, 16px 40px 0 0 #8b4513, 24px 40px 0 0 #8b4513;
  animation: characterWalk 0.3s steps(2) infinite;
}

/* Arms extend from body */
.pixel-character::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: transparent;
  box-shadow:
    /* Left arm */ 0 32px 0 0 #ffd1b3, /* Right arm */ 32px 32px 0 0 #ffd1b3;
  animation: characterArms 0.3s steps(2) infinite;
}

@keyframes characterRun {
  0% {
    left: -80px;
  }
  100% {
    left: calc(100% + 80px);
  }
}

@keyframes characterWalk {
  0% {
    box-shadow:
      /* Head */ 8px 0 0 0 #e60000, 16px 0 0 0 #e60000, 24px 0 0 0 #e60000,
      8px 8px 0 0 #ff6b6b, 16px 8px 0 0 #e60000, 24px 8px 0 0 #ff6b6b,
      /* Face */ 8px 16px 0 0 #ffd1b3, 16px 16px 0 0 #ffd1b3, 24px 16px 0 0 #ffd1b3,
      12px 16px 0 0 #000, 20px 16px 0 0 #000, /* Shirt */ 0 24px 0 0 #0066ff, 8px 24px 0 0 #0066ff,
      16px 24px 0 0 #0066ff, 24px 24px 0 0 #0066ff, 32px 24px 0 0 #0066ff, 0 32px 0 0 #0066ff,
      8px 32px 0 0 #4d94ff, 16px 32px 0 0 #0066ff, 24px 32px 0 0 #4d94ff, 32px 32px 0 0 #0066ff,
      /* Pants */ 8px 40px 0 0 #8b4513, 16px 40px 0 0 #8b4513, 24px 40px 0 0 #8b4513,
      /* Legs - left forward */ 8px 48px 0 0 #8b4513, 16px 48px 0 0 transparent,
      24px 48px 0 0 transparent, /* Shoes */ 8px 56px 0 0 #654321, 16px 56px 0 0 transparent,
      24px 56px 0 0 transparent;
  }
  50% {
    box-shadow:
      /* Head */ 8px 0 0 0 #e60000, 16px 0 0 0 #e60000, 24px 0 0 0 #e60000,
      8px 8px 0 0 #ff6b6b, 16px 8px 0 0 #e60000, 24px 8px 0 0 #ff6b6b,
      /* Face */ 8px 16px 0 0 #ffd1b3, 16px 16px 0 0 #ffd1b3, 24px 16px 0 0 #ffd1b3,
      12px 16px 0 0 #000, 20px 16px 0 0 #000, /* Shirt */ 0 24px 0 0 #0066ff, 8px 24px 0 0 #0066ff,
      16px 24px 0 0 #0066ff, 24px 24px 0 0 #0066ff, 32px 24px 0 0 #0066ff, 0 32px 0 0 #0066ff,
      8px 32px 0 0 #4d94ff, 16px 32px 0 0 #0066ff, 24px 32px 0 0 #4d94ff, 32px 32px 0 0 #0066ff,
      /* Pants */ 8px 40px 0 0 #8b4513, 16px 40px 0 0 #8b4513, 24px 40px 0 0 #8b4513,
      /* Legs - right forward */ 8px 48px 0 0 transparent, 16px 48px 0 0 transparent,
      24px 48px 0 0 #8b4513, /* Shoes */ 8px 56px 0 0 transparent, 16px 56px 0 0 transparent,
      24px 56px 0 0 #654321;
  }
}

@keyframes characterArms {
  0% {
    box-shadow: 0 32px 0 0 #ffd1b3, 32px 32px 0 0 #ffd1b3;
  }
  50% {
    box-shadow: 0 32px 0 0 #ffd1b3, 32px 32px 0 0 #ffd1b3;
  }
}

/* ========================================
   Zone Transition Styling - Smooth Gradients & Atmospheric Particles
   ======================================== */

/* Base transition styling */
.zone-transition {
  height: 30vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Transition 1: Grid to Day (Last Stars of Night Fading) */
.zone-transition-1 {
  background: linear-gradient(
    180deg,
    #171a2e 0%,
    #263459 19%,
    #2e4271 34%,
    #354f87 47%,
    #3e5fa2 57%,
    #476fbd 65%,
    #5181db 73%,
    #5587e5 80%,
    #578cec 86%,
    #5990f3 91%,
    #5a92f6 95%,
    #5b93f8 98%,
    #5c94fa 100%
  );
}

/* Fading stars - 5 small stars disappearing as morning arrives */
.zone-transition-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 20% 30%, rgba(203, 183, 123, 0.3), transparent),
    radial-gradient(1px 1px at 65% 20%, rgba(203, 183, 123, 0.25), transparent),
    radial-gradient(2px 2px at 85% 45%, rgba(203, 183, 123, 0.2), transparent),
    radial-gradient(1px 1px at 35% 65%, rgba(203, 183, 123, 0.15), transparent),
    radial-gradient(2px 2px at 75% 80%, rgba(203, 183, 123, 0.1), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Transition 2: Day to Afternoon (Clean, No Particles) */
.zone-transition-2 {
  background: linear-gradient(
    180deg,
    #76aee2 0%,
    #78b2e3 19%,
    #7ab7e4 34%,
    #7cbae5 47%,
    #7ebee6 57%,
    #80c2e7 65%,
    #82c5e8 73%,
    #83c7e9 80%,
    #84caea 86%,
    #85cbea 91%,
    #86ccea 95%,
    #87cdeb 98%,
    #87ceeb 100%
  );
}

/* Transition 3: Afternoon to Night (Sunset with Emerging Stars) */
.zone-transition-3 {
  background: linear-gradient(
    180deg,
    #5c94fc 0%,
    #6d84d9 10%,
    #7e74b6 20%,
    #8e6493 30%,
    #9f5470 40%,
    #af444d 50%,
    #9a4250 60%,
    #854053 70%,
    #703e56 80%,
    #5b3c59 90%,
    #2c3e50 100%
  );
}

/* Emerging stars - 10 stars fading in as night arrives */
.zone-transition-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(3px 3px at 15% 25%, rgba(203, 183, 123, 0.4), transparent),
    radial-gradient(2px 2px at 45% 15%, rgba(134, 112, 47, 0.35), transparent),
    radial-gradient(2px 2px at 75% 30%, rgba(203, 183, 123, 0.38), transparent),
    radial-gradient(1px 1px at 30% 50%, rgba(203, 183, 123, 0.32), transparent),
    radial-gradient(4px 4px at 85% 55%, rgba(134, 112, 47, 0.4), transparent),
    radial-gradient(2px 2px at 20% 70%, rgba(203, 183, 123, 0.36), transparent),
    radial-gradient(2px 2px at 60% 65%, rgba(134, 112, 47, 0.33), transparent),
    radial-gradient(3px 3px at 90% 80%, rgba(203, 183, 123, 0.38), transparent),
    radial-gradient(1px 1px at 40% 85%, rgba(203, 183, 123, 0.3), transparent),
    radial-gradient(2px 2px at 70% 90%, rgba(134, 112, 47, 0.35), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 1px rgba(203, 183, 123, 0.4));
}

/* Section Container */
.section-discover .section-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Section Title - Video Game Style - centered in Zone 1 */
.section-discover .section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--font-size-7xl);
  color: #ffeb3b;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin: 0;
  white-space: nowrap; /* Section title will not wrap */
  /* Classic arcade text outline */
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
    4px 4px 8px rgba(0, 0, 0, 0.6);
  animation: titlePulse 5s ease-in-out infinite;
}

@keyframes titlePulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
      4px 4px 8px rgba(0, 0, 0, 0.6);
  }
  50% {
    transform: translateX(-50%) scale(1.03);
    text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
      4px 4px 12px rgba(255, 235, 59, 0.4);
  }
}

/* Discover Content - Single card per zone */
.discover-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* Card Base Styling */
.discover-card {
  background: linear-gradient(135deg, #ffeeda 0%, #ffe8c8 100%);
  border: 4px solid var(--color-black-1);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15), 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 500px;
  /* Scroll animation initial state */
  opacity: 0;
  transform: translateY(40px);
}

/* Scroll animation - visible state */
.discover-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) var(--animation-delay, 0s) both;
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pixel-art style decorative corner */
.discover-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    45deg,
    transparent 30%,
    var(--color-accent-1) 30%,
    var(--color-accent-1) 70%,
    transparent 70%
  );
  opacity: 0.3;
}

.discover-card:hover {
  transform: translateY(-8px);
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.15), 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Card Header */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px dotted var(--color-primary);
}

.card-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-4xl);
  color: var(--color-accent-4);
  margin: 0;
}

.card-icon {
  font-size: var(--font-size-4xl);
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.1));
}

/* Card Body */
.card-body {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-black-10);
  line-height: 1.6;
}

.card-body p {
  margin-bottom: 1.5rem;
}

.card-body p:last-child {
  margin-bottom: 0;
}

/* Background Card Specific */
.card-background {
  background: linear-gradient(135deg, #ffd4a3 0%, #ffc78e 100%);
}

/* Values Card Specific */
.card-values {
  background: linear-gradient(135deg, #ffe8f0 0%, #ffd4e5 100%);
}

.values-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.value-item {
  margin-bottom: 2rem;
  padding-left: 2.5rem;
  position: relative;
}

.value-item:last-child {
  margin-bottom: 0;
}

/* Pixel-style bullet points */
.value-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 16px;
  height: 16px;
  background: var(--color-accent-7);
  border: 2px solid var(--color-black-1);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.value-item strong {
  display: block;
  font-size: var(--font-size-large);
  color: var(--color-accent-4);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.value-item p {
  margin: 0;
  color: var(--color-black-1);
}

/* Skills Card Specific */
.card-skills {
  background: linear-gradient(135deg, #d4f0ff 0%, #b8e6ff 100%);
}

.skills-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.skill-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.skill-name {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--color-accent-4);
}

/* Retro-style skill bar */
.skill-bar {
  height: 28px;
  background: var(--color-white);
  border: 3px solid var(--color-black-1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.skill-fill {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--color-accent-7),
    var(--color-accent-7) 10px,
    var(--color-accent-8) 10px,
    var(--color-accent-8) 20px
  );
  border-right: 3px solid var(--color-black-1);
  transition: width 3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
  position: relative;
}

/* Pixel-style shine effect */
.skill-fill::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}

/* Note: Skill bar widths are set dynamically by sections.js on scroll */

/* ========================================
   Clickable Facts System
   ======================================== */

/* Fact tooltip */
.fact-tooltip {
  position: fixed;
  background: linear-gradient(135deg, #ffd4a3, #ffc78e);
  border: 3px solid #000;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-medium);
  max-width: 300px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translate(-50%, -120%) scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 9999;
  color: var(--color-black-1);
  line-height: 1.5;
}

.fact-tooltip.show {
  opacity: 1;
  transform: translate(-50%, -120%) scale(1);
}

/* Block hit animation */
@keyframes blockHit {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(0.95);
    filter: brightness(1.3);
  }
}

.block-hit {
  animation: blockHit 0.3s ease;
}

/* Block rejected animation - plays when user clicks same block twice in a row */
@keyframes blockRejected {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(0) rotate(-5deg);
  }
  75% {
    transform: translateY(0) rotate(5deg);
  }
}

.block-rejected {
  animation: blockRejected 0.3s ease;
}

/* Block disabled state - applied to last-clicked block */
/* Visually indicates this block was just clicked and cannot be re-clicked */
.block-disabled {
  opacity: 0.6;
  filter: grayscale(0.5) brightness(0.9);
  cursor: not-allowed;
}

/* Make clickable blocks interactive */
.pixel-block[data-fact='true'] {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.pixel-block[data-fact='true']:hover {
  transform: translateY(-4px) scale(1.05);
  filter: brightness(1.2);
}

/* Prevent hover effects on disabled blocks */
.pixel-block[data-fact='true'].block-disabled:hover {
  transform: translateY(0) scale(1);
  filter: grayscale(0.5) brightness(0.9);
  cursor: not-allowed;
}

/* ========================================
   Zone 2 - Mountain Range Styling
   ======================================== */

/* Zone 2 - Grass platform (same as Zone 1) */
.zone-2.zone-mountains::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 41%;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.1) 16px,
      rgba(0, 0, 0, 0.1) 18px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.05) 16px,
      rgba(0, 0, 0, 0.05) 18px
    ),
    linear-gradient(
      to bottom,
      #8b4513 0%,
      #8b4513 20%,
      #7a3d0f 20%,
      #7a3d0f 40%,
      #6b3410 40%,
      #6b3410 60%,
      #5c2d0f 60%,
      #5c2d0f 80%,
      #4d260e 80%,
      #4d260e 100%
    );
  border-top: 8px solid #00a800;
  box-shadow: inset 0 8px 0 #00c000, inset 0 4px 0 #00d000;
  z-index: 0;
}

/* Mountain peaks */
.mountain {
  position: absolute;
  bottom: 41%;
  z-index: 1;
}

/* Mountain 1 - Leftmost, smaller */
.mountain-1 {
  left: 0%;
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 180px solid #3a5a6a;
}

.mountain-1::before {
  content: '';
  position: absolute;
  bottom: -180px;
  left: -120px;
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 180px solid #2d4654;
}

.mountain-1::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -40px;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #ffffff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* Mountain 2 - Center-left, tallest */
.mountain-2 {
  left: 20%;
  width: 0;
  height: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 280px solid #3a5a6a;
}

.mountain-2::before {
  content: '';
  position: absolute;
  bottom: -280px;
  left: -160px;
  width: 0;
  height: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 280px solid #2d4654;
}

.mountain-2::after {
  content: '';
  position: absolute;
  bottom: -90px;
  left: -60px;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 90px solid #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}

/* Mountain 3 - Center-right, medium */
.mountain-3 {
  right: 25%;
  width: 0;
  height: 0;
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
  border-bottom: 220px solid #3a5a6a;
}

.mountain-3::before {
  content: '';
  position: absolute;
  bottom: -220px;
  left: -140px;
  width: 0;
  height: 0;
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
  border-bottom: 220px solid #2d4654;
}

.mountain-3::after {
  content: '';
  position: absolute;
  bottom: -65px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 70px solid #ffffff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

/* Mountain 4 - Rightmost, smaller */
.mountain-4 {
  right: 5%;
  width: 0;
  height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 160px solid #3a5a6a;
}

.mountain-4::before {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -110px;
  width: 0;
  height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 160px solid #2d4654;
}

.mountain-4::after {
  content: '';
  position: absolute;
  bottom: -45px;
  left: -35px;
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 55px solid #ffffff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

/* ========================================
   Zone 3 - Forest Cabin Styling
   ======================================== */

/* Zone 3 - Darker grass platform for nighttime */
.zone-3.zone-cabin::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 41%;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.2) 16px,
      rgba(0, 0, 0, 0.2) 18px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.15) 16px,
      rgba(0, 0, 0, 0.15) 18px
    ),
    linear-gradient(
      to bottom,
      #4a6b1a 0%,
      #4a6b1a 20%,
      #3a5515 20%,
      #3a5515 40%,
      #2d4410 40%,
      #2d4410 60%,
      #1f330b 60%,
      #1f330b 80%,
      #152206 80%,
      #152206 100%
    );
  border-top: 8px solid #2d5f0f;
  box-shadow: inset 0 8px 0 #3a7512, inset 0 4px 0 #457d14;
  z-index: 0;
}

/* Moon */
.moon {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 80px;
  height: 80px;
  background: #f4f4f4;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(244, 244, 244, 0.6), 0 0 40px rgba(244, 244, 244, 0.4),
    inset -10px -10px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* Forest tree - tall pine silhouette */
.forest-tree {
  position: absolute;
  bottom: 41%;
  left: 10%;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 180px solid #1a2e1a;
  z-index: 1;
}

/* Tree layers (stacked triangles for pine effect) */
.forest-tree::before {
  content: '';
  position: absolute;
  bottom: -70px;
  left: -70px;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 150px solid #1a2e1a;
}

.forest-tree::after {
  content: '';
  position: absolute;
  bottom: -130px;
  left: -80px;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 130px solid #1a2e1a;
}

/* Cabin */
.cabin {
  position: absolute;
  bottom: calc(39% + 20px);
  right: 15%;
  width: 240px;
  height: 160px;
  background: #5d4037;
  border: 6px solid #3e2723;
  z-index: 1;
}

/* Cabin roof */
.cabin::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -30px;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 100px solid #4a342e;
  border-top: 0;
}

/* Cabin windows with warm glow */
.cabin-window {
  position: absolute;
  width: 60px;
  height: 70px;
  background: #ffeb3b;
  border: 4px solid #3e2723;
  top: 40px;
  box-shadow: 0 0 30px rgba(255, 235, 59, 0.8), 0 0 60px rgba(255, 235, 59, 0.4);
  animation: windowGlow 3s ease-in-out infinite;
}

.window-left {
  left: 30px;
}

.window-right {
  right: 30px;
}

@keyframes windowGlow {
  0%,
  100% {
    box-shadow: 0 0 30px rgba(255, 235, 59, 0.8), 0 0 60px rgba(255, 235, 59, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 235, 59, 1), 0 0 80px rgba(255, 235, 59, 0.6);
  }
}

/* Darken pixel blocks for nighttime in Zone 3 */
.zone-3 .pixel-block {
  filter: brightness(0.7);
}

/* ========================================
   Zone 4 - Castle at Dawn Styling
   ======================================== */

/* Transition 4: Night to Dawn (Sunrise Breaking) */
.zone-transition-4 {
  background: linear-gradient(
    180deg,
    #22293d 0%,
    #3a374d 10%,
    #4f435c 19%,
    #715673 34%,
    #986d8e 47%,
    #a87699 57%,
    #bb81a6 65%,
    #cc8bb2 73%,
    #df96bf 80%,
    #eb9dc7 86%,
    #f2a1cc 91%,
    #f7a4d0 95%,
    #fba6d3 98%,
    #ffa8d5 100%
  );
}

/* Zone 4 - Dawn sky with castle */
.zone-4.zone-castle {
  background: linear-gradient(180deg, #ffa8d5 0%, #ffb8e0 30%, #d4a8ff 60%, #88c0d0 100%);
}

/* Zone 4 - Grass platform (same as other zones, lighter dawn colors) */
.zone-4.zone-castle::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 41%;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.1) 16px,
      rgba(0, 0, 0, 0.1) 18px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 16px,
      rgba(0, 0, 0, 0.05) 16px,
      rgba(0, 0, 0, 0.05) 18px
    ),
    linear-gradient(
      to bottom,
      #6fa82d 0%,
      #6fa82d 20%,
      #5f8f25 20%,
      #5f8f25 40%,
      #4f7a1d 40%,
      #4f7a1d 60%,
      #3f6515 60%,
      #3f6515 80%,
      #2f500d 80%,
      #2f500d 100%
    );
  border-top: 8px solid #7bc800;
  box-shadow: inset 0 8px 0 #90e000, inset 0 4px 0 #a0f000;
  z-index: 0;
}

/* Castle structure */
.castle {
  position: absolute;
  bottom: calc(41% - 6px); /* Account for border */
  left: 6%;
  width: 480px;
  height: 320px;
  z-index: 1;
}

/* Castle main walls */
.castle-main-wall {
  position: absolute;
  bottom: 0;
  left: 80px;
  width: 320px;
  height: 200px;
  background: linear-gradient(135deg, #8b7355 0%, #6b5a45 50%, #5a4a35 100%);
  border: 6px solid #4a3a25;
  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.3);
}

/* Brick texture on main wall */
.castle-main-wall::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 24px,
      rgba(0, 0, 0, 0.15) 24px,
      rgba(0, 0, 0, 0.15) 26px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 32px,
      rgba(0, 0, 0, 0.1) 32px,
      rgba(0, 0, 0, 0.1) 34px
    );
}

/* Central tower */
.castle-tower {
  position: absolute;
  bottom: 0;
  left: 160px;
  width: 160px;
  height: 280px;
  background: linear-gradient(135deg, #9b8365 0%, #7b6a55 50%, #6a5a45 100%);
  border: 6px solid #4a3a25;
  box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Brick texture on tower */
.castle-tower::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(0, 0, 0, 0.15) 20px,
      rgba(0, 0, 0, 0.15) 22px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 28px,
      rgba(0, 0, 0, 0.1) 28px,
      rgba(0, 0, 0, 0.1) 30px
    );
}

/* Tower battlements */
.castle-tower::after {
  content: '';
  position: absolute;
  top: -30px;
  left: -6px;
  right: -6px;
  height: 30px;
  background: linear-gradient(135deg, #a89375 0%, #8b7a65 100%);
  border: 6px solid #4a3a25;
  border-bottom: none;
  box-shadow: inset 0 0 0 8px #4a3a25, inset 0 0 0 16px #a89375, inset 0 0 0 24px #4a3a25,
    inset 0 0 0 32px #a89375, inset 0 0 0 40px #4a3a25;
}

/* Left turret */
.castle-turret-left {
  position: absolute;
  bottom: 140px;
  left: 0;
  width: 100px;
  height: 140px;
  background: linear-gradient(135deg, #8b7355 0%, #6b5a45 100%);
  border: 5px solid #4a3a25;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Left turret roof */
.castle-turret-left::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -20px;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 100px solid #c9302c;
  filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.3));
}

/* Left turret roof highlight */
.castle-turret-left::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
  border-bottom: 90px solid #e74c3c;
  z-index: 1;
}

/* Right turret */
.castle-turret-right {
  position: absolute;
  bottom: 140px;
  right: 0;
  width: 100px;
  height: 140px;
  background: linear-gradient(135deg, #8b7355 0%, #6b5a45 100%);
  border: 5px solid #4a3a25;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Turret windows */
.castle-turret-window {
  position: absolute;
  width: 30px;
  height: 40px;
  background: #ffeb3b;
  border: 3px solid #4a3a25;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 15px rgba(255, 235, 59, 0.6), 0 0 30px rgba(255, 235, 59, 0.3);
  animation: castleWindowGlow 3s ease-in-out infinite;
}

/* Turret window cross detail */
.castle-turret-window::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #4a3a25;
}

.castle-turret-window::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #4a3a25;
  transform: translateX(-50%);
}

/* Left turret window */
.castle-turret-left .castle-turret-window {
  bottom: 50px;
  left: 50%;
  margin-left: -15px;
}

/* Right turret window */
.castle-turret-right .castle-turret-window {
  bottom: 50px;
  left: 50%;
  margin-left: -15px;
}

/* Tower door */
.castle-tower-door {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 100px;
  background: linear-gradient(180deg, #5d4037 0%, #4a342e 100%);
  border: 4px solid #3e2723;
  border-radius: 30px 30px 0 0;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4);
}

/* Tower door handle */
.castle-tower-door::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #3e2723;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #5d4037;
}

/* Right turret roof */
.castle-turret-right::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -20px;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 100px solid #c9302c;
  filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.3));
}

/* Right turret roof highlight */
.castle-turret-right::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
  border-bottom: 90px solid #e74c3c;
  z-index: 1;
}

/* Castle door */
.castle-door {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 120px;
  background: linear-gradient(180deg, #5d4037 0%, #4a342e 100%);
  border: 4px solid #3e2723;
  border-radius: 40px 40px 0 0;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4);
}

/* Door details */
.castle-door::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: #3e2723;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #5d4037;
}

/* Castle windows (glowing) */
.castle-window {
  position: absolute;
  width: 40px;
  height: 50px;
  background: #ffeb3b;
  border: 3px solid #4a3a25;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 20px rgba(255, 235, 59, 0.8), 0 0 40px rgba(255, 235, 59, 0.4);
  animation: castleWindowGlow 3s ease-in-out infinite;
}

/* Window cross detail */
.castle-window::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #4a3a25;
}

.castle-window::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #4a3a25;
  transform: translateX(-50%);
}

.castle-window-1 {
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
}

.castle-window-2 {
  bottom: 80px;
  left: 100px;
}

.castle-window-3 {
  bottom: 80px;
  right: 100px;
}

.castle-window-4 {
  bottom: 180px;
  left: 30px;
}

.castle-window-5 {
  bottom: 180px;
  right: 30px;
}

@keyframes castleWindowGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.8), 0 0 40px rgba(255, 235, 59, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 235, 59, 1), 0 0 60px rgba(255, 235, 59, 0.6);
  }
}

/* Castle flags */
.castle-flag {
  position: absolute;
  width: 40px;
  height: 30px;
  background: #e74c3c;
  border: 2px solid #c9302c;
  transform-origin: left center;
  animation: flagWave 2s ease-in-out infinite;
}

/* Flag pole - extends downward from bottom of flag */
.castle-flag::before {
  content: '';
  position: absolute;
  top: 100%; /* Start at bottom of flag, extend downward */
  left: -3px;
  width: 6px;
  height: 80px;
  background: #3e2723;
  border-radius: 3px;
  z-index: -1;
}

/* Left turret flag - positioned on left turret */
.castle-turret-left .castle-flag {
  bottom: calc(100% + 110px); /* Higher above turret roof */
  left: 50%;
  margin-left: -20px; /* Half of flag width */
}

/* Right turret flag - positioned on right turret */
.castle-turret-right .castle-flag {
  bottom: calc(100% + 110px); /* Higher above turret roof */
  left: 50%;
  margin-left: -20px; /* Half of flag width */
  animation-delay: 0.2s;
}

/* Tower flag (top center) - on main tower */
.castle-tower .castle-flag {
  bottom: calc(100% + 85px); /* Higher above tower battlements */
  left: 50%;
  margin-left: -20px; /* Half of flag width */
  animation-delay: 0.4s;
}

@keyframes flagWave {
  0%,
  100% {
    transform: skew(0deg) scaleX(1);
  }
  25% {
    transform: skew(-3deg) scaleX(0.95);
  }
  50% {
    transform: skew(0deg) scaleX(1);
  }
  75% {
    transform: skew(3deg) scaleX(0.95);
  }
}

/* Professional Highlights Card Specific */
.card-experience {
  background: linear-gradient(135deg, #e8d5ff 0%, #d5c0ff 100%);
}

/* Pixel bushes for Zone 4 */
.zone-4 .pixel-bush-1 {
  left: 5%;
}

.zone-4 .pixel-bush-2 {
  right: 15%;
}

/* Sun in Zone 4 */
.sun-4 {
  position: absolute;
  top: 20%;
  right: 20%;
  width: 100px;
  height: 100px;
  background: #edcd15;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(237, 205, 21, 0.8), 0 0 60px rgba(255, 215, 0, 0.5),
    0 0 90px rgba(255, 215, 0, 0.3);
  z-index: 1;
  animation: sunGlow 4s ease-in-out infinite;
}

@keyframes sunGlow {
  0%,
  100% {
    box-shadow: 0 0 30px rgba(237, 205, 21, 0.8), 0 0 60px rgba(255, 215, 0, 0.5),
      0 0 90px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(237, 205, 21, 1), 0 0 80px rgba(255, 215, 0, 0.7),
      0 0 120px rgba(255, 215, 0, 0.4);
  }
}

/* Distant mountains (background, right side) */
.zone-4-mountain {
  position: absolute;
  bottom: 41%;
  z-index: 0; /* Behind castle and card */
  opacity: 0.6;
}

/* Mountain 1 - Rightmost, small */
.zone-4-mountain-1 {
  right: 5%;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 120px solid #6b5a8e;
}

/* Mountain 1 shadow layer */
.zone-4-mountain-1::before {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 120px solid #5a4a7d;
}

/* Mountain 2 - Center-right, tallest */
.zone-4-mountain-2 {
  right: 20%;
  width: 0;
  height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 180px solid #6b5a8e;
}

/* Mountain 2 shadow layer */
.zone-4-mountain-2::before {
  content: '';
  position: absolute;
  bottom: -180px;
  left: -110px;
  width: 0;
  height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 180px solid #5a4a7d;
}

/* Mountain 3 - Left of mountains, medium */
.zone-4-mountain-3 {
  right: 35%;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 150px solid #6b5a8e;
}

/* Mountain 3 shadow layer */
.zone-4-mountain-3::before {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -90px;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 150px solid #5a4a7d;
}

/* ========================================
   Zone 4 - Character Stop Animation & Fireworks
   ======================================== */

/* Zone 4 character - runs right to left continuously */
.zone-4 .pixel-character {
  left: auto;
  right: -80px;
  animation: characterRunToCastle 15s linear infinite;
  transform: scaleX(-1); /* Flip entire character to face left */
}

@keyframes characterRunToCastle {
  0% {
    right: -80px;
  }
  100% {
    right: calc(100% + 80px); /* Run all the way across like other zones */
  }
}

/* ========================================
   Character Direction Reversal (Zone 2)
   ======================================== */

/* Reverse character animation for Zone 2 */
.pixel-character-reversed {
  animation: characterRunReversed 15s linear infinite !important;
  transform: scaleX(-1); /* Flip character horizontally */
}

@keyframes characterRunReversed {
  0% {
    right: -80px;
    left: auto;
  }
  100% {
    right: calc(100% + 80px);
    left: auto;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .section-discover {
    min-height: 450vh; /* Updated for Zone 4 */
  }

  .discover-zones-container {
    min-height: 450vh;
  }

  .discover-zone {
    min-height: 100vh;
    padding: 2rem 1.5rem;
  }

  /* Keep transition height doubled on mobile */
  .zone-transition {
    height: 30vh;
  }

  .section-discover .section-title {
    font-size: var(--font-size-6xl);
  }

  .discover-content {
    max-width: 360px;
    padding: 0 1rem;
  }

  .discover-card {
    padding: 2rem;
    position: relative;
    z-index: 10; /* Ensure cards are above decorative elements */
  }

  .card-title {
    font-size: var(--font-size-3xl);
  }

  .card-icon {
    font-size: 2.5rem;
  }

  /* Zone 2 - Mountain mobile optimizations */
  .mountain {
    transform: scale(0.7);
    transform-origin: bottom center;
  }

  /* Zone 3 - Cabin/Forest mobile optimizations */
  .moon {
    width: 60px;
    height: 60px;
  }

  .forest-tree {
    transform: scale(0.7);
    transform-origin: bottom center;
  }

  .cabin {
    width: 168px;
    height: 112px;
    border: 4px solid #3e2723;
  }

  .cabin::before {
    bottom: 100%;
    left: -21px;
    border-left: 105px solid transparent;
    border-right: 105px solid transparent;
    border-bottom: 70px solid #4a342e;
  }

  .cabin-window {
    width: 42px;
    height: 49px;
    border: 3px solid #3e2723;
    top: 28px;
  }

  .window-left {
    left: 21px;
  }

  .window-right {
    right: 21px;
  }

  /* Touch-friendly click targets for facts */
  .pixel-block[data-fact='true'] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Reduce size of decorative elements on tablet */
  .pixel-block {
    width: 36px;
    height: 36px;
  }

  .pixel-block::before {
    font-size: 24px;
  }

  .pixel-bush {
    width: 48px;
    height: 36px;
  }

  .pixel-bush::before {
    width: 24px;
    height: 24px;
    left: 12px;
    top: -6px;
  }

  /* Move decorative elements to less intrusive positions */
  /* Zone 1 */
  .zone-1 .pixel-block-1 {
    top: 8%;
    left: 5%;
  }

  .zone-1 .pixel-block-2 {
    top: 35%;
    right: 5%;
  }

  .zone-1 .pixel-block-3 {
    top: 5%;
    right: 3%;
  }

  .zone-1 .pixel-bush-1 {
    left: 2%;
  }

  .zone-1 .pixel-bush-2 {
    right: 5%;
  }

  /* Zone 2 */
  .zone-2 .pixel-block-1 {
    top: 5%;
    left: 11%;
  }

  .zone-2 .pixel-block-2 {
    top: 28%;
    right: 13%;
  }

  .zone-2 .pixel-block-3 {
    top: 13%;
    right: 4%;
  }

  /* Zone 3 */
  .zone-3 .pixel-block-1 {
    top: 41%;
    left: 8%;
  }

  .zone-3 .pixel-block-2 {
    top: 35%;
    right: 10%;
  }

  .zone-3 .pixel-block-3 {
    top: 30%;
    right: 25%;
  }

  /* Zone 4 - Castle mobile optimizations */
  .castle {
    transform: scale(0.7);
    transform-origin: bottom left;
  }

  /* Zone 4 mountains - scale down */
  .zone-4-mountain {
    transform: scale(0.7);
    transform-origin: bottom center;
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .section-discover {
    min-height: 450vh;
  }

  .discover-zone {
    padding: 2rem 1rem;
  }

  .section-discover .section-title {
    font-size: var(--font-size-5xl);
  }

  .discover-card {
    padding: 1.5rem;
    z-index: 10; /* Keep cards above decorations */
  }

  .card-title {
    font-size: var(--font-size-2xl);
    margin-bottom: 1rem;
  }

  .card-icon {
    font-size: 2rem;
  }

  .card-description {
    font-size: var(--font-size-small);
  }

  .skill-item {
    font-size: var(--font-size-small);
  }

  .value-item {
    font-size: var(--font-size-small);
  }

  /* Keep pixel character and clouds for fun, they don't overlap */
  .pixel-character,
  .pixel-character-reversed,
  .zone-1 .section-container::before,
  .zone-1 .section-container::after {
    display: block;
  }

  /* Move pixel-blocks away from card text */
  /* Zone 1 */
  .zone-1 .pixel-block-1 {
    top: 9%;
    left: 5%;
  }

  .zone-1 .pixel-block-2 {
    top: 35%;
    right: 5%;
  }

  .zone-1 .pixel-block-3 {
    top: 1%;
    right: 3%;
  }

  /* Zone 2 */
  .zone-2 .pixel-block-1 {
    top: 2%;
    left: 15%;
  }

  .zone-2 .pixel-block-2 {
    top: 28%;
    right: 5%;
  }

  .zone-2 .pixel-block-3 {
    top: 9%;
    right: 4%;
  }

  /* Zone 3 */
  .zone-3 .pixel-block-1 {
    top: 38%;
    left: 8%;
  }

  .zone-3 .pixel-block-2 {
    top: 31%;
    right: 10%;
  }

  .zone-3 .pixel-block-3 {
    top: 25%;
    right: 25%;
  }

  /* Zone 2 - Mountain: further scale down */
  .mountain {
    transform: scale(0.5);
    transform-origin: bottom center;
  }

  /* Zone 3 - Cabin/Forest: further scale down */
  .moon {
    width: 50px;
    height: 50px;
  }

  .forest-tree {
    transform: scale(0.5);
    transform-origin: bottom center;
    left: 5%;
  }

  .cabin {
    width: 120px;
    height: 80px;
    border: 3px solid #3e2723;
  }

  .cabin::before {
    bottom: 100%;
    left: -15px;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    border-bottom: 50px solid #4a342e;
  }

  .cabin-window {
    width: 30px;
    height: 35px;
    border: 2px solid #3e2723;
    top: 20px;
  }

  .window-left {
    left: 15px;
  }

  .window-right {
    right: 15px;
  }

  /* Zone 4 - Castle further scale down for small mobile */
  .castle {
    transform: scale(0.5);
    transform-origin: bottom left;
  }

  /* Zone 4 mountains - further scale down */
  .zone-4-mountain {
    transform: scale(0.5);
    transform-origin: bottom center;
  }
}

/* Medium desktop - prevent decoration overlap (1200px - 1400px) */
@media (min-width: 1025px) and (max-width: 1400px) {
  /* Reposition pixel blocks to avoid content */
  .pixel-block-1 {
    top: 12%;
    left: 3%;
  }

  .pixel-block-2 {
    top: 35%;
    right: 5%;
  }

  .pixel-block-3 {
    top: 8%;
    right: 2%;
  }

  /* Reposition bushes closer to edges */
  .pixel-bush-1 {
    left: 2%;
  }

  .pixel-bush-2 {
    right: 3%;
  }

  /* Ensure cards always appear above decorations */
  .discover-card {
    position: relative;
    z-index: 10;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .discover-content {
    max-width: 400px;
  }

  /* Reposition decorations to avoid overlapping cards */
  .pixel-block-1 {
    top: 8%;
    left: 2%;
  }

  .pixel-block-2 {
    top: 45%;
    right: 3%;
  }

  .pixel-block-3 {
    top: 5%;
    right: 1%;
  }

  .pixel-bush-1 {
    left: 1%;
  }

  .pixel-bush-2 {
    right: 2%;
  }

  /* Ensure cards are always above decorations */
  .discover-card {
    position: relative;
    z-index: 10;
  }
}