/* The consciousness test (tasks/dogru.js). A wall of sentences, some of them
   built the way this gezegen builds an address and some of them not, and a
   device that takes a reading once the experiencer has made up their mind. */

.dogru {
  margin-top: 1.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4em;
  width: 100%;
}

.dogru-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
  max-width: 34em;
}

/* A sentence waiting to be judged. Cream border like any other quiet control:
   nothing here is telling the experiencer anything before they decide. */
.dogru-card {
  font-family: var(--serif);
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  line-height: 1.5;
  color: var(--cream);
  background: none;
  border: 1px solid rgba(243, 234, 216, 0.24);
  border-radius: 999px;
  padding: 0.5em 1.05em;
  cursor: pointer;
  opacity: 0;
  animation: pill-in 0.5s ease forwards;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease;
}
.dogru-card:hover, .dogru-card:focus-visible {
  border-color: rgba(243, 234, 216, 0.5);
  outline: none;
}

/* Chosen. This is the one place on the gezegen where a control lights up
   green: the sage is the planet's own map colour, so a lit sentence reads as
   claimed BY THIS PLACE and never gets confused with gold, which always means
   Turkish, or with the gold edge, which always means work still waiting. */
.dogru-card.lit {
  border-color: rgba(168, 201, 140, 0.85);
  background: rgba(168, 201, 140, 0.12);
  box-shadow: 0 0 18px rgba(168, 201, 140, 0.28);
  transform: translateY(-1px);
}

/* The way out is an ANSWER, not a control: the experiencer says Bunlar doğru
   and the device reads them. It is a plain answer pill in a plain `.choices`
   row (tasks/dogru.js), so it needs no styling of its own and stands exactly
   where every other answer on this gezegen stands. */

/* ---------- Objects on the floor (layout: "objects") ----------
   A choice whose options are THINGS rather than sentences: a crate, a bag, a
   cupboard. The icon is the whole answer, so nothing is written underneath
   unless the scene file asks for it. Naming them would hand over the very
   thing the experiencer is being asked to recognise. */

.choices.objects {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6em;
  margin-top: 2.2em;
}
.pill.pill-object {
  border: none;
  background: none;
  padding: 0.3em;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  transition: transform 0.22s ease, filter 0.22s ease;
}
.pill.pill-object:hover, .pill.pill-object:focus-visible {
  background: none;
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 6px 18px rgba(168, 201, 140, 0.35));
  outline: none;
}
.pill-object .pill-icon {
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  line-height: 1;
}
/* An object with nothing written on it still needs the label element gone,
   not merely empty, or the flex gap opens a hole under every icon. */
.pill-object > span:not(.pill-icon):empty { display: none; }

/* Once one of them has been opened, none of them are hoverable any more: the
   answer is happening and the floor is no longer a question. */
.choices.objects.answered .pill-object { pointer-events: none; }
.choices.objects.answered .pill-object:not(.gave):not(.empty) { opacity: 0.35; }

/* The one that had it. The icon rocks back on its heels the way the crate
   does when it gives something up. */
.pill-object.gave .pill-icon { animation: object-give 0.55s ease; }
@keyframes object-give {
  25% { transform: rotate(-7deg) translateY(1px); }
  60% { transform: rotate(5deg) translateY(-2px); }
}

/* And the one that never had it. A shudder, and nothing comes out. */
.pill-object.empty .pill-icon { animation: object-empty 0.5s ease; }
@keyframes object-empty {
  15% { transform: translateX(-5px); }
  35% { transform: translateX(5px); }
  55% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* What was inside, thrown up over the lid: the same arc the crate uses on the
   beat before this one, so a container behaves like a container wherever it
   stands. */
.pill-object { position: relative; }
.pill-pop {
  position: absolute;
  left: 50%;
  top: 0.2em;
  font-size: 1.8rem;
  pointer-events: none;
  animation: object-pop 1.4s cubic-bezier(0.2, 0.8, 0.5, 1) forwards;
}
@keyframes object-pop {
  0%   { transform: translate(-50%, 0) scale(0.4) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: translate(calc(-50% + var(--tx, 50px) * 0.6), var(--ty, -100px)) scale(1.15) rotate(var(--tr, 30deg)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx, 50px)), 2.2em) scale(0.9) rotate(calc(var(--tr, 30deg) * 1.8)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pill-object.gave .pill-icon,
  .pill-object.empty .pill-icon { animation: none; }
  .pill-pop { animation-duration: 0.8s; }
}