/* css/tasks/neresi.css — Burası neresi? (js/tasks/neresi.js)
   A room with the lights out. The only things on screen are the question, the
   three answers, and whatever the nose happens to be passing over.

   The dark is a real layer rather than a background colour, because it has to
   sit ON TOP of the planet's atmosphere: the city lights, the drifting place
   words and the constellation are all still out there, and the whole joke is
   that the experiencer cannot see any of it. */

.neresi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6em;
  width: 100%;
}

/* The blackout. Fixed, edge to edge, under the beat's own text but over
   everything the planet was showing a second ago. */
.nr-dark {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: #000;
  /* Nothing here is clickable and the nose is followed from the window, so
     this layer must not take a tap either: the answer pills sit above it and
     used to be unreachable through it. */
  pointer-events: none;
  touch-action: none;
}

/* The question and the answers ride ABOVE the dark. */
.nr-ask, .nr-answers { position: relative; z-index: 4; }

.nr-ask {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 4.4vw, 2rem);
  color: var(--gold);
  text-align: center;
  text-shadow: 0 0 26px rgba(232, 193, 106, 0.25);
  margin-top: 12vh;
}

.nr-answers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  min-height: 9em;
}

/* The verdict on a pill. Green and red exactly as everywhere else, plus the
   quiet lavender that says "this was the one" when the guess was wrong. */
.nr-answers .pill.nr-right {
  border-color: rgba(168, 201, 140, 0.85);
  box-shadow: 0 0 22px rgba(168, 201, 140, 0.22);
}
.nr-answers .pill.nr-wrong {
  border-color: rgba(214, 122, 122, 0.85);
  opacity: 0.55;
}
.nr-answers .pill.nr-truth {
  border-color: rgba(154, 147, 184, 0.9);
  box-shadow: 0 0 18px rgba(154, 147, 184, 0.2);
}

/* Naming the place right lifts the dark a little, for as long as the answer is
   on screen: the room is still black, but it is a room you now know. */
.neresi.right .nr-dark { background: #07070B; }
.neresi.right .nr-nose { width: 60vmin; height: 60vmin; }
.neresi.wrong .nr-dark { animation: nr-lurch 0.5s ease; }
@keyframes nr-lurch {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .neresi.wrong .nr-dark { animation: none; }
}