/* CSS Custom Properties for Time-Based Themes */
:root {
  /* Morning Theme */
  --morning-sky-start: #ff9a8b;
  --morning-sky-end: #a8e6cf;
  --morning-matrix-color: #ff6b35;
  --morning-mountain: #8b7355;
  --morning-tree-trunk: #8b4513;
  --morning-tree-trunk-dark: #654321;
  --morning-tree-leaves: #ff6b35;
  --morning-tree-leaves-dark: #cc5500;
  --morning-ground: #90a955;
  --morning-chasm: #2d1810;
  --morning-character: #ffd93d;
  --morning-character-dark: #ccaa00;
  --morning-button: #ff6b35;
  --morning-text: #2d1810;

  /* Day Theme */
  --day-sky-start: #87ceeb;
  --day-sky-end: #98fb98;
  --day-matrix-color: #4169e1;
  --day-mountain: #696969;
  --day-tree-trunk: #8b4513;
  --day-tree-trunk-dark: #654321;
  --day-tree-leaves: #ff4500;
  --day-tree-leaves-dark: #cc3700;
  --day-ground: #228b22;
  --day-chasm: #2d1810;
  --day-character: #ffd700;
  --day-character-dark: #ccaa00;
  --day-button: #4169e1;
  --day-text: #000080;

  /* Twilight Theme */
  --twilight-sky-start: #ff7f50;
  --twilight-sky-end: #191970;
  --twilight-matrix-color: #ff69b4;
  --twilight-mountain: #4a4a4a;
  --twilight-tree-trunk: #654321;
  --twilight-tree-trunk-dark: #4a2c1a;
  --twilight-tree-leaves: #ff4500;
  --twilight-tree-leaves-dark: #cc3700;
  --twilight-ground: #2f4f2f;
  --twilight-chasm: #1a1a1a;
  --twilight-character: #ffa500;
  --twilight-character-dark: #cc8400;
  --twilight-button: #ff69b4;
  --twilight-text: #ffffff;

  /* Night Theme */
  --night-sky-start: #191970;
  --night-sky-end: #000000;
  --night-matrix-color: #00ff7f;
  --night-mountain: #2f2f2f;
  --night-tree-trunk: #2f2f2f;
  --night-tree-trunk-dark: #1a1a1a;
  --night-tree-leaves: #4169e1;
  --night-tree-leaves-dark: #2c4a8b;
  --night-ground: #1a1a1a;
  --night-chasm: #000000;
  --night-character: #ffff00;
  --night-character-dark: #cccc00;
  --night-button: #00ff7f;
  --night-text: #ffffff;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Courier New', monospace;
  overflow-x: hidden;
  background: var(--day-sky-start);
  color: var(--day-text);
  transition: all 0.5s ease;
}

/* Time-based theme classes */
body.morning {
  background: var(--morning-sky-start);
  color: var(--morning-text);
}

body.day {
  background: var(--day-sky-start);
  color: var(--day-text);
}

body.twilight {
  background: var(--twilight-sky-start);
  color: var(--twilight-text);
}

body.night {
  background: var(--night-sky-start);
  color: var(--night-text);
}

/* Scene Container */
.scene-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Sky Layer */
.sky-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(to bottom, 
    var(--day-sky-start) 0%, 
    var(--day-sky-end) 100%);
  z-index: 1;
}

.morning .sky-layer {
  background: linear-gradient(to bottom, 
    var(--morning-sky-start) 0%, 
    var(--morning-sky-end) 100%);
}

.day .sky-layer {
  background: linear-gradient(to bottom, 
    var(--day-sky-start) 0%, 
    var(--day-sky-end) 100%);
}

.twilight .sky-layer {
  background: linear-gradient(to bottom, 
    var(--twilight-sky-start) 0%, 
    var(--twilight-sky-end) 100%);
}

.night .sky-layer {
  background: linear-gradient(to bottom, 
    var(--night-sky-start) 0%, 
    var(--night-sky-end) 100%);
}

/* Matrix Code Animation */
.matrix-code {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  overflow: hidden;
  pointer-events: none;
}

.code-stream {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.1;
  color: var(--day-matrix-color);
  animation: matrix-fall 20s linear infinite, matrix-color-shift 8s ease-in-out infinite;
  white-space: pre-line;
  width: auto;
  height: auto;
  text-shadow: 0 0 3px currentColor;
}

.code-stream-full {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.3;
  color: var(--day-matrix-color);
  animation: matrix-fall 25s linear infinite, matrix-color-shift 8s ease-in-out infinite;
  white-space: pre-line;
  width: 90%;
  text-align: left;
  text-shadow: 0 0 3px currentColor;
}

.matrix-column {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.1;
  color: var(--day-matrix-color);
  animation: matrix-fall-vertical linear infinite, matrix-color-shift 6s ease-in-out infinite;
  white-space: pre-line;
  width: 2ch;
  text-align: center;
  text-shadow: 0 0 2px currentColor;
  opacity: 0.7;
}

.morning .code-stream { 
  color: var(--morning-matrix-color);
  animation: matrix-fall 20s linear infinite, matrix-color-shift-morning 8s ease-in-out infinite;
}
.day .code-stream { 
  color: var(--day-matrix-color);
  animation: matrix-fall 20s linear infinite, matrix-color-shift-day 8s ease-in-out infinite;
}
.twilight .code-stream { 
  color: var(--twilight-matrix-color);
  animation: matrix-fall 20s linear infinite, matrix-color-shift-twilight 8s ease-in-out infinite;
}
.night .code-stream { 
  color: var(--night-matrix-color);
  animation: matrix-fall 20s linear infinite, matrix-color-shift-night 8s ease-in-out infinite;
}

.morning .code-stream-full { 
  color: var(--morning-matrix-color);
  animation: matrix-fall 25s linear infinite, matrix-color-shift-morning 8s ease-in-out infinite;
}
.day .code-stream-full { 
  color: var(--day-matrix-color);
  animation: matrix-fall 25s linear infinite, matrix-color-shift-day 8s ease-in-out infinite;
}
.twilight .code-stream-full { 
  color: var(--twilight-matrix-color);
  animation: matrix-fall 25s linear infinite, matrix-color-shift-twilight 8s ease-in-out infinite;
}
.night .code-stream-full { 
  color: var(--night-matrix-color);
  animation: matrix-fall 25s linear infinite, matrix-color-shift-night 8s ease-in-out infinite;
}

.morning .matrix-column { 
  color: var(--morning-matrix-color);
  animation: matrix-fall-vertical linear infinite, matrix-color-shift-morning 6s ease-in-out infinite;
}
.day .matrix-column { 
  color: var(--day-matrix-color);
  animation: matrix-fall-vertical linear infinite, matrix-color-shift-day 6s ease-in-out infinite;
}
.twilight .matrix-column { 
  color: var(--twilight-matrix-color);
  animation: matrix-fall-vertical linear infinite, matrix-color-shift-twilight 6s ease-in-out infinite;
}
.night .matrix-column { 
  color: var(--night-matrix-color);
  animation: matrix-fall-vertical linear infinite, matrix-color-shift-night 6s ease-in-out infinite;
}

@keyframes matrix-fall {
  0% { transform: translateY(-120vh); }
  100% { transform: translateY(120vh); }
}

@keyframes matrix-fall-vertical {
  0% { transform: translateY(-150vh); }
  100% { transform: translateY(150vh); }
}

@keyframes matrix-color-shift {
  0%, 100% { 
    color: var(--day-matrix-color);
    text-shadow: 0 0 3px currentColor, 0 0 6px rgba(255, 255, 255, 0.3);
  }
  25% { 
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(255, 255, 255, 0.5);
  }
  50% { 
    color: rgba(200, 255, 200, 0.9);
    text-shadow: 0 0 4px currentColor, 0 0 8px rgba(200, 255, 200, 0.4);
  }
  75% { 
    color: rgba(255, 200, 200, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(255, 200, 200, 0.5);
  }
}

@keyframes matrix-color-shift-morning {
  0%, 100% { 
    color: var(--morning-matrix-color);
    text-shadow: 0 0 3px currentColor, 0 0 6px rgba(255, 200, 100, 0.3);
  }
  25% { 
    color: rgba(255, 255, 200, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(255, 255, 200, 0.5);
  }
  50% { 
    color: rgba(255, 200, 100, 0.9);
    text-shadow: 0 0 4px currentColor, 0 0 8px rgba(255, 200, 100, 0.4);
  }
  75% { 
    color: rgba(255, 150, 50, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(255, 150, 50, 0.5);
  }
}

@keyframes matrix-color-shift-day {
  0%, 100% { 
    color: var(--day-matrix-color);
    text-shadow: 0 0 3px currentColor, 0 0 6px rgba(200, 255, 255, 0.3);
  }
  25% { 
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(255, 255, 255, 0.5);
  }
  50% { 
    color: rgba(200, 255, 200, 0.9);
    text-shadow: 0 0 4px currentColor, 0 0 8px rgba(200, 255, 200, 0.4);
  }
  75% { 
    color: rgba(200, 200, 255, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(200, 200, 255, 0.5);
  }
}

@keyframes matrix-color-shift-twilight {
  0%, 100% { 
    color: var(--twilight-matrix-color);
    text-shadow: 0 0 3px currentColor, 0 0 6px rgba(255, 100, 150, 0.3);
  }
  25% { 
    color: rgba(255, 150, 200, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(255, 150, 200, 0.5);
  }
  50% { 
    color: rgba(200, 100, 255, 0.9);
    text-shadow: 0 0 4px currentColor, 0 0 8px rgba(200, 100, 255, 0.4);
  }
  75% { 
    color: rgba(255, 100, 150, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(255, 100, 150, 0.5);
  }
}

@keyframes matrix-color-shift-night {
  0%, 100% { 
    color: var(--night-matrix-color);
    text-shadow: 0 0 3px currentColor, 0 0 6px rgba(100, 100, 255, 0.3);
  }
  25% { 
    color: rgba(150, 150, 255, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(150, 150, 255, 0.5);
  }
  50% { 
    color: rgba(100, 200, 255, 0.9);
    text-shadow: 0 0 4px currentColor, 0 0 8px rgba(100, 200, 255, 0.4);
  }
  75% { 
    color: rgba(100, 100, 255, 0.8);
    text-shadow: 0 0 5px currentColor, 0 0 10px rgba(100, 100, 255, 0.5);
  }
}

/* Mountains SVG */
.mountains {
  position: absolute;
  bottom: 30%;
  left: 0;
  width: 100%;
  height: 60%;
  z-index: 1;
}

.mountain-svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  color: var(--day-mountain);
}

.mountain-main {
  left: 0;
  z-index: 3;
}

.mountain-bg {
  left: -10%;
  height: 80%;
  opacity: 0.6;
  z-index: 1;
}

.mountain-fg {
  left: 10%;
  height: 70%;
  opacity: 0.8;
  z-index: 2;
}

/* Trees SVG */
.trees {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 2;
}

.tree-svg {
  position: absolute;
  bottom: 0;
  width: auto;
  height: 100%;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* Tree positioning - creating a forest */
.tree-1 { left: 5%; height: 85%; }
.tree-2 { left: 15%; height: 95%; }
.tree-3 { left: 25%; height: 80%; }
.tree-4 { left: 35%; height: 90%; }
.tree-5 { left: 45%; height: 85%; }
.tree-6 { left: 55%; height: 95%; }
.tree-7 { left: 65%; height: 88%; }
.tree-8 { left: 75%; height: 82%; }
.tree-9 { left: 85%; height: 92%; }
.tree-10 { right: 15%; height: 87%; }
.tree-11 { right: 8%; height: 89%; }
.tree-12 { right: 2%; height: 83%; }

/* SVG Theme colors - You can use CSS filters or JavaScript to change colors */
.morning .mountain-svg { 
  filter: hue-rotate(30deg) saturate(1.2); 
}
.day .mountain-svg { 
  filter: none; 
}
.twilight .mountain-svg { 
  filter: hue-rotate(-30deg) brightness(0.8); 
}
.night .mountain-svg { 
  filter: hue-rotate(-60deg) brightness(0.6); 
}

.morning .tree-svg { 
  filter: hue-rotate(20deg) saturate(1.3); 
}
.day .tree-svg { 
  filter: none; 
}
.twilight .tree-svg { 
  filter: hue-rotate(-20deg) brightness(0.9); 
}
.night .tree-svg { 
  filter: hue-rotate(-90deg) brightness(0.7); 
}

.morning .character-svg { 
  filter: hue-rotate(15deg) saturate(1.1); 
}
.day .character-svg { 
  filter: none; 
}
.twilight .character-svg { 
  filter: hue-rotate(-15deg) brightness(0.9); 
}
.night .character-svg { 
  filter: hue-rotate(-45deg) brightness(0.8); 
}

/* Ground Layer */
.ground-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  z-index: 3;
}

.ground {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    var(--day-ground) 0%, 
    var(--day-ground) 50%, 
    #8b4513 70%, 
    #ff4500 85%,
    #ff0000 100%
  );
  position: relative;
}

.chasm {
  position: absolute;
  bottom: 0;
  left: calc(70vw - 50px); /* Position at 70% of viewport width, centered on chasm */
  width: 100px;
  height: 100%;
  background: linear-gradient(to bottom, #ff4500, #ff0000, #cc0000);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  animation: lava-glow 2s ease-in-out infinite alternate;
}

/* Lava glow effect */
@keyframes lava-glow {
  0% { 
    box-shadow: 0 0 20px #ff4500, 0 0 40px #ff0000;
    filter: brightness(1);
  }
  100% { 
    box-shadow: 0 0 30px #ff6500, 0 0 60px #ff2200;
    filter: brightness(1.2);
  }
}

.morning .ground { background: var(--morning-ground); }
.morning .chasm { background: var(--morning-chasm); }
.day .ground { background: var(--day-ground); }
.day .chasm { background: var(--day-chasm); }
.twilight .ground { background: var(--twilight-ground); }
.twilight .chasm { background: var(--twilight-chasm); }
.night .ground { background: var(--night-ground); }
.night .chasm { background: var(--night-chasm); }

/* NPC Character - Nerd SVG */
.npc-character {
  position: absolute;
  bottom: 25%;
  left: calc(50vw - 24px); /* Center horizontally (half viewport minus half character width) */
  width: 48px;
  height: 72px;
  z-index: 4;
  transition: all 0.3s ease;
}

.character-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}


/* Jump Button */
.jump-checkbox {
  display: none;
}

.jump-button {
  position: absolute;
  bottom: 45%;
  left: calc(50vw - 60px); /* Center horizontally, offset to the left of character */
  background: var(--day-button);
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 5;
  transition: all 0.3s ease;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.jump-button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.morning .jump-button { background: var(--morning-button); }
.day .jump-button { background: var(--day-button); }
.twilight .jump-button { background: var(--twilight-button); }
.night .jump-button { background: var(--night-button); }

/* Fire Splash Effect */
.fire-splash {
  position: fixed;
  bottom: 0;
  left: calc(70vw - 50px); /* Same position as chasm */
  width: 100px;
  height: 100vh;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fire-drop {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ff6500, #ff0000);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 10px #ff4500;
}

/* Fire drop positioning is now handled dynamically in JavaScript */

/* Animation Sequences */
.jump-checkbox:checked ~ .npc-character {
  animation: npc-jump 4s ease-in-out forwards;
}

.jump-checkbox:checked + .jump-button {
  display: none;
}

.jump-checkbox:checked ~ .fire-splash {
  opacity: 1;
  animation: fadeIn 0.1s ease-out 4s forwards;
}

/* Dynamic fire drop animations - handled by JavaScript */
.jump-checkbox:checked ~ .fire-splash .fire-drop {
  animation: fire-splash-general 1.5s ease-out forwards;
}

.jump-checkbox:checked ~ .button-section {
  display: flex;
  animation: slideUp 1s ease-out 5s forwards;
}

/* Add scroll effect when jumping */
.jump-checkbox:checked ~ .ground-layer {
  animation: scrollDown 4s ease-in-out forwards;
}

@keyframes npc-jump {
  0% { 
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  25% { 
    transform: translateX(20vw) translateY(-10vh) rotate(45deg);
  }
  75% { 
    transform: translateX(20vw) translateY(60vh) rotate(135deg);
  }
  100% { 
    transform: translateX(20vw) translateY(80vh) rotate(180deg);
  }
}

/* Individual fire drop animations to target specific button positions */
@keyframes fire-splash-1 {
  0% { 
    opacity: 1; 
    transform: translateY(0) scale(1);
    box-shadow: 0 0 10px #ff4500;
  }
  40% { 
    opacity: 1; 
    transform: translateY(-60px) scale(1.2);
    box-shadow: 0 0 20px #ff4500, 0 0 30px #ff0000;
  }
  70% { 
    opacity: 1; 
    transform: translateY(-20vh) translateX(-30vw) scale(1.5);
    box-shadow: 0 0 25px #ff4500, 0 0 40px #ff0000;
  }
  100% { 
    opacity: 0; 
    transform: translateY(-20vh) translateX(-30vw) scale(8);
    box-shadow: 0 0 30px #ff4500, 0 0 50px #ff0000;
  }
}

@keyframes fire-splash-2 {
  0% { 
    opacity: 1; 
    transform: translateY(0) scale(1);
    box-shadow: 0 0 10px #ff4500;
  }
  40% { 
    opacity: 1; 
    transform: translateY(-60px) scale(1.2);
    box-shadow: 0 0 20px #ff4500, 0 0 30px #ff0000;
  }
  70% { 
    opacity: 1; 
    transform: translateY(-40vh) translateX(-30vw) scale(1.5);
    box-shadow: 0 0 25px #ff4500, 0 0 40px #ff0000;
  }
  100% { 
    opacity: 0; 
    transform: translateY(-40vh) translateX(-30vw) scale(8);
    box-shadow: 0 0 30px #ff4500, 0 0 50px #ff0000;
  }
}

@keyframes fire-splash-3 {
  0% { 
    opacity: 1; 
    transform: translateY(0) scale(1);
    box-shadow: 0 0 10px #ff4500;
  }
  40% { 
    opacity: 1; 
    transform: translateY(-60px) scale(1.2);
    box-shadow: 0 0 20px #ff4500, 0 0 30px #ff0000;
  }
  70% { 
    opacity: 1; 
    transform: translateY(-60vh) translateX(-30vw) scale(1.5);
    box-shadow: 0 0 25px #ff4500, 0 0 40px #ff0000;
  }
  100% { 
    opacity: 0; 
    transform: translateY(-60vh) translateX(-30vw) scale(8);
    box-shadow: 0 0 30px #ff4500, 0 0 50px #ff0000;
  }
}

@keyframes fire-splash-general {
  0% { 
    opacity: 1; 
    transform: translateY(0) scale(1);
    box-shadow: 0 0 10px #ff4500;
  }
  30% { 
    opacity: 1; 
    transform: translateY(calc(-1 * var(--random-height, 30vh) * 0.3)) scale(1.1);
    box-shadow: 0 0 15px #ff4500, 0 0 25px #ff0000;
  }
  60% { 
    opacity: 1; 
    transform: translateY(calc(-1 * var(--random-height, 30vh) * 0.6)) translateX(calc(-1 * var(--random-distance, 20vw) * 0.5)) scale(1.3);
    box-shadow: 0 0 20px #ff4500, 0 0 35px #ff0000;
  }
  100% { 
    opacity: 0; 
    transform: translateY(calc(-1 * var(--random-height, 30vh))) translateX(calc(-1 * var(--random-distance, 20vw))) scale(6);
    box-shadow: 0 0 30px #ff4500, 0 0 50px #ff0000;
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes scrollDown {
  0% { 
    transform: translateY(0);
  }
  50% { 
    transform: translateY(0);
  }
  100% { 
    transform: translateY(-20vh);
  }
}

@keyframes slideUp {
  0% { 
    transform: translateY(100%);
    opacity: 0;
  }
  100% { 
    transform: translateY(0);
    opacity: 1;
  }
}

/* Main Title */
.main-title {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 10;
  color: var(--day-text);
}

/* Copyright Notice */
.copyright-notice {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--day-text);
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 15;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.morning .main-title { color: var(--morning-text); }
.day .main-title { color: var(--day-text); }
.twilight .main-title { color: var(--twilight-text); }
.night .main-title { color: var(--night-text); }

.morning .copyright-notice { color: var(--morning-text); }
.day .copyright-notice { color: var(--day-text); }
.twilight .copyright-notice { color: var(--twilight-text); }
.night .copyright-notice { color: var(--night-text); }

/* Help/Info Card */
.help-card-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 20;
  perspective: 1000px;
}

.help-card {
  width: 200px;
  height: 120px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.help-card.flipped {
  transform: rotateY(180deg);
}

.help-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.help-card-front,
.help-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.help-card-front {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.help-card-back {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transform: rotateY(180deg);
}

.question-mark {
  font-size: 56px;
  font-weight: bold;
  color: var(--day-text);
  text-shadow: 0 0 10px currentColor;
  font-family: 'Courier New', monospace;
}

.card-text {
  font-size: 14px;
  color: var(--day-text);
  text-align: center;
  line-height: 1.2;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 5px currentColor;
  padding: 10px;
}

/* Time-based styling for help card */
.morning .question-mark { color: var(--morning-text); }
.day .question-mark { color: var(--day-text); }
.twilight .question-mark { color: var(--twilight-text); }
.night .question-mark { color: var(--night-text); }

.morning .card-text { color: var(--morning-text); }
.day .card-text { color: var(--day-text); }
.twilight .card-text { color: var(--twilight-text); }
.night .card-text { color: var(--night-text); }

/* Button Section */
.button-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* Full page width */
  height: 100vh; /* Full page height */
  background: transparent;
  padding: 2rem;
  display: none; /* Hidden initially */
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 7;
}


.buttons-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.service-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #ff4500, #ff6500, #ff0000);
  color: white;
  text-decoration: none;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  transform: translateY(20px);
  opacity: 0;
  animation: button-appear 0.6s ease forwards;
  box-shadow: 0 4px 8px rgba(255, 69, 0, 0.4), 0 0 15px rgba(255, 100, 0, 0.3);
  width: 100px;
  height: 40px;
  word-wrap: break-word;
}

.service-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(255, 69, 0, 0.6), 0 0 25px rgba(255, 100, 0, 0.5);
  background: linear-gradient(135deg, #ff5500, #ff7500, #ff1100);
}

/* Lava buttons maintain their color regardless of time of day */

@keyframes button-appear {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Reduce tree count on mobile */
  .tree-4, .tree-5, .tree-6, .tree-7, .tree-8, .tree-9, .tree-10, .tree-11, .tree-12 {
    display: none;
  }
  
  .tree-1 { left: 10%; height: 90%; }
  .tree-2 { left: 50%; height: 85%; }
  .tree-3 { right: 15%; height: 95%; }
  
  .npc-character {
    left: calc(50vw - 20px); /* Center horizontally, adjusted for smaller size */
    width: 40px;
    height: 60px;
  }
  
  .jump-button {
    bottom: 50%; /* Move button higher on mobile */
    left: calc(50vw - 50px); /* Center horizontally, adjusted for smaller size */
    padding: 10px 20px;
    font-size: 12px;
  }
  
  .chasm {
    left: calc(70vw - 40px); /* Same position as chasm, adjusted for smaller size */
    width: 80px;
  }
  
  .fire-splash {
    left: calc(70vw - 40px); /* Same position as chasm, adjusted for smaller size */
    width: 80px;
  }
  
  .main-title {
    font-size: clamp(1.2rem, 6vw, 2.5rem);
  }
  
  .buttons-container {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .service-button {
    padding: 0.8rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .scene-container {
    height: 80vh;
  }
  
  .button-section {
    min-height: auto;
    padding: 1rem;
  }
  
  .code-stream {
    font-size: 10px;
  }
  
  .tree-svg {
    transform: scale(0.8);
  }
  
  .npc-character {
    left: calc(50vw - 18px); /* Center horizontally, adjusted for smallest size */
    width: 36px;
    height: 54px;
  }
  
  .jump-button {
    bottom: 55%; /* Move button even higher on smallest screens */
    left: calc(50vw - 45px); /* Center horizontally, adjusted for smallest size */
    padding: 8px 16px;
    font-size: 11px;
  }
}