/* The phrase chorus: greetings, farewells, thanks (js/tasks/chorus.js).
   Shared task classes (.pill) and the pill-in keyframes stay in base.css;
   everything chorus-only lives here. */

/* Two columns of phrases, so a group never becomes one tall stack. Each cell
   stacks its card over the answer that settles beneath it. */
.chorus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.8em 1.2em;
  width: min(32em, 92vw);
  margin: 2em auto 1.3em;
}
.chorus-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  opacity: 0;
  transform: translateY(8px);
  animation: pill-in 0.5s ease forwards;
}
.phrase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  width: 100%;
  padding: 0.5em 1.15em;
  background: none;
  border: 1px solid rgba(232, 193, 106, 0.32);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.4s ease;
}
.phrase-card:hover, .phrase-card:focus-visible {
  border-color: var(--gold);
  background: rgba(232, 193, 106, 0.08);
  outline: none;
}
.phrase-tr {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.3vw, 1.15rem);
  color: var(--gold);
}
.phrase-g {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.68rem;
  color: var(--lavender);
}
/* Kept: the phrase is in your sky now, so it holds a soft gold glow. */
.phrase-card.kept {
  border-color: rgba(232, 193, 106, 0.7);
  box-shadow: 0 0 16px rgba(232, 193, 106, 0.22);
}
.phrase-card.kept .phrase-tr { text-shadow: 0 0 12px rgba(232, 193, 106, 0.5); }

/* The answer that comes back, a small box out from under the phrase. */
.reply-slot { display: flex; justify-content: center; }
.phrase-reply {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  padding: 0.4em 0.9em;
  border: 1px dashed rgba(243, 234, 216, 0.3);
  border-radius: 14px;
  background: rgba(243, 234, 216, 0.04);
  opacity: 0;
  transform: scale(0.7) translateY(-4px);
  transform-origin: center top;
}
.phrase-reply.show { animation: reply-pop 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.reply-tr { font-family: var(--serif); font-size: 0.95rem; color: var(--cream); white-space: nowrap; }
.reply-g { font-family: var(--sans); font-style: italic; font-size: 0.66rem; color: var(--lavender); white-space: nowrap; }
@keyframes reply-pop { to { opacity: 1; transform: none; } }

/* The transition dialogue sits low in the box, the same place every beat's
   answers do, so Evren's line and the reply box never jump between beats. It is
   a plain pill: no extra padding, or its top half reads as empty. */
.chorus-done {
  margin-top: auto;
  opacity: 0;
  animation: pill-in 0.5s ease 0.3s forwards;
}

/* Catch the answer: tapping a farewell throws its reply across the screen, and
   the learner must catch it before it sails off. The layer takes no clicks,
   only the flying replies do. */
.fly-layer { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.reply-fly {
  position: absolute;
  left: 0; top: 0;
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  transform: none;
  will-change: transform;
  border-color: rgba(232, 193, 106, 0.55);
  box-shadow: 0 0 16px rgba(232, 193, 106, 0.22);
  transition: opacity 0.3s ease, box-shadow 0.2s ease;
}
.reply-fly:hover { border-color: var(--gold); box-shadow: 0 0 22px rgba(232, 193, 106, 0.45); }
/* Caught: it flares gold and fades where it was, transform frozen by the loop. */
.reply-fly.caught {
  opacity: 0;
  box-shadow: 0 0 26px rgba(232, 193, 106, 0.8);
  pointer-events: none;
}

/* On a phone the wide phrases fall back to a single column. */
@media (max-width: 520px) {
  .chorus { grid-template-columns: 1fr; width: min(20em, 92vw); }
}

/* The choosing game: keep only five. A counter above, Evren's comment below,
   reserved a fixed height so a new remark never nudges the grid. */
.pick-counter {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--lavender);
  opacity: 0.7;
  margin-bottom: 0.2em;
}
.phrase-card.locked {
  opacity: 0.32;
  pointer-events: none;
  filter: saturate(0.6);
}
.pick-note {
  min-height: 4.2em;
  max-width: 28em;
  margin: 1.1em auto 0;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.3vw, 1.12rem);
  line-height: 1.6;
  color: var(--cream);
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
}
.pick-note.show { animation: pill-in 0.5s ease forwards; }