/* font recommended by AI given the story's ancient Egyptian theme */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:wght@400;500;600&display=swap');

/* Main page layout and dark theme */
body { font-family: 'EB Garamond', serif; max-width:1400px; margin:0 auto; padding:0 1rem; background:#000; color:#facf78; font-size:18px; }

/* Banner at the top of the page */
.banner { padding: 8px 0; text-align: center;  margin-bottom: 2rem; }
.banner h2 { font-family: 'Cinzel', serif; color: #f5d36c; margin: 0; font-size: 1.9rem; letter-spacing: 0.2em; font-weight: 600;  }

/* Flex container for image and content side-by-side */
.container {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

/* Header section for image - positioned for prompt icon */
header {
  flex: 0 0 auto;
  position: relative;
  min-width: 0;
}

/* Image sizing and styling */
header img {
  max-width: 100%;
  height: auto;
  width: 40vw;
  max-height: 80vh;
  border-radius:20px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.9), inset 0 0 40px rgba(0,0,0,0.7);
  aspect-ratio: auto;
  object-fit: cover;
}

/* Header title styling */
header h1 { font-family:'Cinzel', serif; letter-spacing:0.06em; font-size:2.2rem; margin-bottom:0; color:#fde394; }

/* Content area takes remaining space */
.content { flex: 1; }

/* Larger story description text */
.content p { font-size:1.5rem; line-height:2rem; }

/* Center the title in the content area */
.content h1 { text-align:center; font-size:32px; }


/* Choice buttons container */
.choices { margin-top:1.25rem; display:flex; flex-direction:column; gap:.5rem; align-items:center; }

/* Choice button styling */
.choice a { display:inline-block; width:360px; padding:.35rem .525rem; background:#ffd465; color:#1a1006; text-decoration:none; border-radius:4px; font-weight:600; letter-spacing:0.02em; font-size:1.05rem; text-align:center; margin-bottom: 10px; transition: all 0.3s ease; }

/* Choice button glow effect when hovering */
.choice a:hover { background:#ffdd79; color:#0d0804; box-shadow: 0 0 20px #d4af37, 0 0 40px #d4af37, 0 0 60px rgba(212, 175, 55, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.3); transform: translateY(-2px) scale(1.02); }

/* Hint container - positioned relatively for popup */
.hint { margin-top:1rem; position: relative; display: inline-block; }

/* Hint popup text - change to visible when hovering */
.hint:hover .hint-text { visibility: visible; opacity: 1; }


/* Hint question mark icon styling */
.hint-icon { cursor: help; background:#2d2416; color:#f5d36c; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:bold; font-size:16px; }


/* Hint popup text - hidden when not hovering */
.hint-text { visibility: hidden; opacity: 0; width: 300px; background-color: #1d1a14; color: #d4af37; text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; top: 125%; left: 50%; transform: translateX(-50%); transition: opacity 0.3s; font-style: italic; font-size:1rem; font-family: Arial, Helvetica, sans-serif; }

/* Arrow pointing up to hint icon */
.hint-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: transparent transparent #1d1a14 transparent; }



/* Prompt info box positioned at bottom right of image */
.prompt-info { position: absolute; bottom: 10px; right: 10px; display: inline-block; }

/* Prompt info icon styling */
.prompt-icon { cursor: help; background:#d1a814; color:#000000; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:bold; font-size:16px; }

/* Prompt info popup text - initially hidden */
.prompt-text { visibility: hidden; opacity: 0; width: 350px; background-color: #333; color: #fff; text-align: left; border-radius: 6px; padding: 12px; position: absolute; z-index: 1; bottom: 125%; right: 0; transition: opacity 0.3s; font-size:13px; font-family: Arial, Helvetica, sans-serif; }

/* Show prompt text on hover */
.prompt-info:hover .prompt-text { visibility: visible; opacity: 1; }

/* Arrow pointing up from prompt popup */
.prompt-text::after { content: ""; position: absolute; top: 100%; right: 14px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }

/* Links inside prompt text - bright color for visibility */
.prompt-text a { color: #00ffff; text-decoration: underline; }
/* Footer styling */
footer { margin-top:2rem; color:#666; font-size:1.1rem; }

/* Mobile responsive design */
/* Tablet responsive design (1024px and below) */
@media (max-width: 1024px) {
  header img {
    width: 45vw;
  }

  .content p { font-size: 1.2rem; line-height: 1.6rem; }
}

/* Mobile responsive design (900px and below) */
@media (max-width: 900px) {
  /* Stack container vertically on mobile */
  .container {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  /* Header image full width */
  header {
    width: 100%;
    display: flex;
    justify-content: center;
    height: auto;
  }

  /* Mobile image sizing - width only, height scales naturally */
  header img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Content full width on mobile */
  .content {
    width: 100%;
  }

  /* Mobile heading sizing */
  .content h1 { font-size: 1.8rem; }

  /* Mobile description text sizing */
  .content p { font-size: 1.4rem; line-height: 1.8rem; }

  /* Mobile banner heading */
  .banner h2 { font-size: 1.4rem; }

  /* Mobile choice buttons container - stretch full width */
  .choices {
    width: 100%;
  }

  /* Mobile choice buttons full width with consistent sizing */
  .choice a { width: 90vw; max-width: 360px; display: block; margin-left: auto; margin-right: auto; }
}

/* Footer styling */
footer { margin-top:2rem; color:#666; font-size:1.1rem; }