/* ============================================================
   NOCTURNE — palette reference
   wall:   #233b2e   (dark green)
   wood:   #4a3320 / #5b3d28 / #3b2a1d
   brass:  #c9a24b
   bg:     #0a0a0a
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---------------- TITLE SCREEN (placeholder) ---------------- */
#title-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  color: #c9a24b;
}
#title-screen h1 {
  font-size: 4rem;
  letter-spacing: 0.3rem;
  margin: 0;
  font-weight: 400;
}
#title-screen .subtitle {
  color: #6b6b6b;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}
#title-screen button {
  margin-top: 2.5rem;
  padding: 0.7rem 2.2rem;
  background: transparent;
  border: 1px solid #c9a24b;
  color: #c9a24b;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
}
#title-screen button:hover { background: rgba(201,162,75,0.12); }
#title-screen.hidden { display: none; }

/* ---------------- STAGE ---------------- */
#stage-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}
#stage {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
  cursor: none; /* the cursor itself IS the flashlight */
}

.interactive { cursor: pointer; }

/* highlight glow applied via JS when hovered / first-tapped */
.highlighted {
  filter: drop-shadow(0 0 10px rgba(255, 240, 190, 0.85));
}

#darkness {
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#darkness.lights-on { opacity: 0; }

/* tooltip label near cursor */
#tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.9);
  color: #e8d9b0;
  padding: 4px 10px;
  border: 1px solid #c9a24b;
  font-size: 0.85rem;
  border-radius: 2px;
  display: none;
  z-index: 40;
  white-space: nowrap;
}

/* ---------------- MODAL (PC screen, photo zoom, painting, safe) ---------------- */
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
}
#modal-overlay.open { display: flex; }
#modal-box {
  position: relative;
  background: #14100b;
  border: 1px solid #c9a24b;
  color: #e8d9b0;
  max-width: 90vw;
  width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem;
}
#modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #c9a24b;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}
#modal-content h2 {
  margin-top: 0;
  font-weight: 400;
  letter-spacing: 0.05rem;
  color: #c9a24b;
}
#modal-content p { line-height: 1.5; }
#modal-content .note-body {
  background: #1c1710;
  border-left: 3px solid #c9a24b;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  font-style: italic;
}
#modal-content .desktop-icons {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.desktop-icon {
  width: 90px;
  text-align: center;
  cursor: pointer;
  color: #cfcfcf;
  font-size: 0.8rem;
}
.desktop-icon .icon-box {
  width: 56px;
  height: 44px;
  margin: 0 auto 6px;
  background: #2a2a2a;
  border: 1px solid #555;
}
.desktop-icon:hover .icon-box { border-color: #c9a24b; }

#modal-content input[type="text"] {
  background: #0a0a0a;
  border: 1px solid #c9a24b;
  color: #e8d9b0;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  width: 100%;
  margin-top: 0.5rem;
}
#modal-content button.action-btn {
  margin-top: 0.8rem;
  padding: 0.5rem 1.2rem;
  background: transparent;
  border: 1px solid #c9a24b;
  color: #c9a24b;
  font-family: inherit;
  cursor: pointer;
}
#modal-content .feedback {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  min-height: 1.2em;
}
#modal-content .feedback.bad { color: #b05a4a; }
#modal-content .feedback.good { color: #7fae7f; }

/* ---------------- END SCREEN ---------------- */
#end-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e8d9b0;
}
#end-screen.open { display: flex; }
#end-reveal-slot {
  width: 60vmin;
  height: 60vmin;
  max-width: 500px;
  max-height: 500px;
  background: #1a1a1a;
  border: 1px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal-placeholder-text { color: #555; font-size: 0.9rem; }
.end-line {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
  opacity: 0;
  animation: fadein 2s ease forwards 0.8s;
}
@keyframes fadein { to { opacity: 1; } }

/* fan spin animation, triggered by class toggle */
#fan-blades.spinning {
  animation: spin 0.6s linear infinite;
  transform-origin: 1080px 140px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* plant rustle */
#plant-leaves.rustling {
  animation: rustle 0.5s ease-in-out;
}
@keyframes rustle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* wrong-book wobble */
.wobble {
  animation: wobble 0.4s ease-in-out;
}
@keyframes wobble {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px) rotate(-2deg); }
  60% { transform: translateY(2px) rotate(2deg); }
}

/* responsive tweak for small / iPad portrait */
@media (max-width: 820px) {
  #title-screen h1 { font-size: 2.6rem; }
  #modal-box { width: 92vw; padding: 1.2rem; }
}