/* Cevap Avı — Merak's Answer Hunt (js/tasks/cevap.js).
   One question standing still in the middle of a court, five answers drifting
   around it, and an eight second line under the question draining away. The
   question never moves, because on this gezegen the question is the thing that
   has been waiting; the answers are what came loose. */

/* The court is the whole screen (Ahmet, 2026-08-22). Every other game on the
   platform lives inside #beat's own column, but this one holds five answers at
   once and some of them are whole sentences: in a beat-width box the long ones
   spent the round pinned against a wall with nowhere to drift. The margins the
   chrome needs are kept in js/tasks/cevap.js, not here, because the drift has
   to bounce off them frame by frame. */
.cv-court {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  touch-action: manipulation;
}

.cv-field {
  position: absolute;
  inset: 0;
}
/* The court itself lets clicks through to the beat underneath; only the
   question and the answers are live. */
.cv-centre, .cv-answer { pointer-events: auto; }

/* ---- the question ---- */

.cv-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  max-width: 80%;
  text-align: center;
}
.cv-question {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4.6vw, 2.1rem);
  line-height: 1.2;
  color: var(--gold);
  white-space: nowrap;
}
/* Put back where it belongs. */
.cv-centre.cv-right { animation: cv-right 0.7s ease; }
@keyframes cv-right {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  40%      { transform: translate(-50%, -50%) scale(1.09); }
}
/* A mess. */
.cv-centre.cv-wrong { animation: cv-wrong 0.55s ease; }
@keyframes cv-wrong {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  20%      { transform: translate(-50%, -50%) translateX(-8px); }
  55%      { transform: translate(-50%, -50%) translateX(7px); }
  80%      { transform: translate(-50%, -50%) translateX(-3px); }
}

/* ---- the six seconds ---- */

.cv-clock {
  width: min(11em, 60%);
  height: 3px;
  border-radius: 2px;
  background: rgba(243, 234, 216, 0.13);
  overflow: hidden;
}
.cv-clock-fill {
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0.75;
}
/* The last two seconds: the line turns the colour a mistake costs. */
.cv-clock.cv-urgent .cv-clock-fill {
  background: #E8776A;
  opacity: 1;
}

/* ---- the answers ---- */

.cv-answer {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  border: 1px solid rgba(243, 234, 216, 0.22);
  border-radius: 999px;
  background: rgba(11, 10, 31, 0.42);
  padding: 0.34em 0.85em;
  font-family: var(--serif);
  font-size: clamp(0.92rem, 2.3vw, 1.1rem);
  color: var(--cream);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.cv-answer:hover { border-color: rgba(232, 193, 106, 0.6); }

/* The label carries every animation, because the BUTTON's own transform is
   its position on the court, rewritten every frame by the drift. An animation
   that touches transform on the button wipes that position out and throws the
   answer into the top-left corner for as long as it plays. */
.cv-label { display: inline-block; }

/* Caught, and it belonged here. */
.cv-answer.cv-hit {
  border-color: var(--gold);
  background: rgba(232, 193, 106, 0.16);
}
.cv-answer.cv-hit .cv-label { animation: cv-hit 0.6s ease; }
@keyframes cv-hit {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.16); }
}

/* Caught, and it answered a different question. */
.cv-answer.cv-miss {
  border-color: #E8776A;
  color: #E8776A;
}
.cv-answer.cv-miss .cv-label { animation: cv-shake 0.5s ease; }
@keyframes cv-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  60%      { transform: translateX(5px); }
}

/* The one that was right, stepping forward after a miss or a timeout: a red
   flash on its own teaches nothing, so the answer shows itself. */
.cv-answer.cv-show {
  border-color: var(--gold);
  background: rgba(232, 193, 106, 0.16);
  animation: cv-show 0.9s ease;
}
@keyframes cv-show {
  0%, 100% { opacity: 1; }
  30%      { opacity: 0.35; }
}

/* The run is over: the field lets go. */
.cv-answer.cv-gone { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cv-centre.cv-right, .cv-centre.cv-wrong, .cv-answer.cv-show,
  .cv-answer.cv-hit .cv-label, .cv-answer.cv-miss .cv-label { animation: none; }
}