/* Uyum Melodisi: A ayı's görev (js/tasks/melodi.js), ported from Ahmet's
   own game. The card sings its syllables, the playhead glides toward the
   gold slot, and the player plays the suffix as the phrase's last note.
   Nothing rotates, nothing falls. The meter comes from css/tasks/meter.css. */

/* The court covers the screen; only the keys take taps, so the counter and
   the map orb stay reachable. */
.melodi-court {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6vh;
}

/* Up next: the words about to sing. The nearest is gold and biggest. */
.melodi-queue {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  min-height: 1.6em;
  font-family: var(--serif);
}
.melodi-q { color: var(--lavender); opacity: 0.55; font-size: 0.95rem; }
.melodi-q.n0 { color: var(--gold); opacity: 1; font-size: 1.35rem; text-shadow: 0 0 14px rgba(232, 193, 106, 0.35); }
.melodi-q.n1 { color: var(--cream); opacity: 0.7; font-size: 1.1rem; }
.melodi-qdot { color: rgba(243, 234, 216, 0.25); }

/* The field: the card, its track, and the playhead that walks them. */
.melodi-field {
  position: relative;
  width: min(92vw, 34em);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.melodi-card {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  min-height: 1.6em;
}
/* A syllable rests dim and wakes gold as its note plays. */
.melodi-syl {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6.4vw, 2.7rem);
  color: var(--cream);
  opacity: 0.4;
  padding: 0 0.06em;
  transition: opacity 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.melodi-syl.on {
  opacity: 1;
  color: var(--gold);
  transform: translateY(-3px);
  text-shadow: 0 6px 24px rgba(232, 193, 106, 0.35);
}
/* The suffix slot: dashed and waiting, pulsing when its beat is due. */
.melodi-slot {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6.4vw, 2.7rem);
  min-width: 1.7em;
  text-align: center;
  padding: 0 0.25em;
  border-radius: 14px;
  border: 2px dashed rgba(243, 234, 216, 0.25);
  color: var(--lavender);
  transition: all 0.12s ease;
}
.melodi-slot.armed { border-style: solid; animation: melodi-pulse 0.5s infinite ease-in-out; }
.melodi-slot.good { border-color: transparent; animation: melodi-pop 0.3s ease; }
.melodi-slot.bad { border-color: #E8776A; color: #E8776A; animation: clash-shake 0.35s ease; }
@keyframes melodi-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes melodi-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* The track: one tick per syllable, the gold target over the slot, and the
   answer window drawn as a soft gold band. */
.melodi-track { position: relative; width: 100%; height: 20px; }
.melodi-band {
  position: absolute;
  top: 2px;
  height: 16px;
  background: rgba(232, 193, 106, 0.09);
  border: 1px solid rgba(232, 193, 106, 0.26);
  border-radius: 5px;
}
/* The full-point zone inside the acceptance: answer in the bright core for
   the whole point, anywhere in the band for the half. */
.melodi-band-core {
  position: absolute;
  top: 4px;
  height: 12px;
  background: rgba(232, 193, 106, 0.2);
  border: 1px solid rgba(232, 193, 106, 0.4);
  border-radius: 4px;
}
.melodi-tick {
  position: absolute;
  top: 5px;
  width: 2px;
  height: 10px;
  background: rgba(243, 234, 216, 0.28);
  transform: translateX(-1px);
  border-radius: 2px;
}
.melodi-tick.target {
  top: 1px;
  height: 18px;
  width: 3px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(232, 193, 106, 0.7);
  transform: translateX(-1.5px);
}

/* The playhead: the gezen çizgi, walking the word in real rhythm. */
.melodi-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(243, 234, 216, 0.9), rgba(243, 234, 216, 0.15));
  box-shadow: 0 0 14px rgba(243, 234, 216, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-200px);
  transition: opacity 0.2s ease;
}
.melodi-playhead::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cream);
  transform: translate(-50%, 50%);
  box-shadow: 0 0 14px rgba(243, 234, 216, 0.8);
}

/* The judgement, rising over the card and gone. */
.melodi-judge {
  position: absolute;
  top: -1.9em;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.melodi-judge.show { animation: melodi-rise 0.6s ease; }
@keyframes melodi-rise {
  0% { opacity: 0; transform: translateY(6px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* The harmony hint after a slip: last vowel → suffix, in family color. */
.melodi-hint {
  min-height: 1.5em;
  font-family: var(--sans);
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: var(--lavender);
  text-align: center;
}

/* The piano keys: one per suffix family, colored by --fam. */
.melodi-keys {
  display: flex;
  gap: clamp(0.8em, 4vw, 2em);
  pointer-events: auto;
}
.melodi-key {
  min-width: clamp(5.2em, 18vw, 7em);
  padding: 0.8em 1.2em 1.05em;
  border: 1px solid color-mix(in srgb, var(--fam, #E8C16A) 55%, transparent);
  border-bottom-width: 4px;
  border-radius: 12px 12px 14px 14px;
  background: rgba(18, 14, 36, 0.55);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--fam, #E8C16A);
  text-shadow: 0 0 12px color-mix(in srgb, var(--fam, #E8C16A) 55%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
}
.melodi-key:hover, .melodi-key:focus-visible {
  background: color-mix(in srgb, var(--fam, #E8C16A) 10%, rgba(18, 14, 36, 0.55));
  outline: none;
}
.melodi-key:active { transform: translateY(2px); border-bottom-width: 2px; }
/* Four stamps must share one row on a phone, so the quad kiosk sits tighter. */
.melodi-keys.quad { gap: clamp(0.45em, 2.2vw, 1.1em); }
.melodi-keys.quad .melodi-key {
  min-width: clamp(3.4em, 19vw, 5em);
  padding: 0.7em 0.6em 0.95em;
}
/* The arrow on the key: keyboard directions, in display order. Touch hides
   them — a fingertip needs no compass. */
.melodi-key-arrow {
  display: block;
  margin-top: 0.3em;
  font-family: var(--sans);
  font-size: 0.62em;
  letter-spacing: 0.08em;
  color: rgba(243, 234, 216, 0.55);
}
@media (hover: none) {
  .melodi-key-arrow { display: none; }
  .melodi-key { padding-bottom: 0.8em; }
}
/* The key that sang: a bright press in its own color. */
.melodi-key.sing { animation: melodi-sing 0.5s ease; }
@keyframes melodi-sing {
  25% {
    background: color-mix(in srgb, var(--fam, #E8C16A) 26%, rgba(18, 14, 36, 0.55));
    box-shadow: 0 0 30px color-mix(in srgb, var(--fam, #E8C16A) 55%, transparent);
    transform: translateY(2px);
  }
}
/* The wrong press: a flat shake in clash red. */
.melodi-key.wrong { animation: melodi-wrong 0.45s ease; }
@keyframes melodi-wrong {
  20%, 60% { transform: translateX(-5px); border-color: #E8776A; color: #E8776A; }
  40%, 80% { transform: translateX(5px); border-color: #E8776A; color: #E8776A; }
}

/* The one instruction, gone at the first answer. Same card as every game. */
.melodi-tutorial {
  position: fixed;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-50%);
  max-width: 22em;
  padding: 0.7em 1.1em;
  border: 1px solid rgba(116, 176, 255, 0.35);
  border-radius: 16px;
  background: rgba(18, 14, 36, 0.62);
  backdrop-filter: blur(3px);
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.3vw, 1.1rem);
  line-height: 1.45;
  color: var(--cream);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.melodi-tutorial.show { opacity: 1; animation: spin-tut 2.2s ease-in-out infinite; }

/* ---------- The count-in: one bar of metronome before the song ---------- */
/* Ahmet, 2026-08-11. The band counts you in. The number pulses on each click,
   the four dots fill as they go, and the stage waits behind it: while
   `.counting` is on the court, the card and the keys sit back and nothing
   looks playable, because nothing is yet. */
.melodi-count {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.melodi-count.gone { opacity: 0; transform: scale(1.25); }
.melodi-count-n {
  font-family: var(--serif);
  font-size: clamp(3rem, 14vw, 5.4rem);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(232, 193, 106, 0.45);
}
.melodi-count-n.tick { animation: melodi-count-pop 0.42s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes melodi-count-pop {
  0% { transform: scale(1.5); opacity: 0.25; }
  35% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0.8; }
}
.melodi-count-dots { display: flex; gap: 0.55em; }
.melodi-count-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(232, 193, 106, 0.45);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.melodi-count-dot.lit {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(232, 193, 106, 0.8);
}
/* The stage, held: dimmed and slightly small until the downbeat arrives. */
.melodi-court.counting .melodi-card,
.melodi-court.counting .melodi-track,
.melodi-court.counting .melodi-queue { opacity: 0.18; }
.melodi-court.counting .melodi-keys { opacity: 0.35; transform: scale(0.96); }
.melodi-court.counting .melodi-playhead { opacity: 0; }
.melodi-card, .melodi-track, .melodi-queue, .melodi-keys {
  transition: opacity 0.45s ease, transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .melodi-syl, .melodi-slot, .melodi-key.sing, .melodi-key.wrong,
  .melodi-judge.show, .melodi-count-n.tick { animation: none; transition: none; }
  .melodi-playhead { transition: none; }
}