/* The vowel rescue: wounded words in flight (js/tasks/puzzle.js).
   Shared task classes (.task-arena, .task-dialog, .task-note, .drag-ghost)
   and the shake / pill-in keyframes stay in base.css; everything
   rescue-only lives here. */

/* The sky holds the flying words. It covers the screen but takes no clicks;
   only the words themselves do, so a tap on the void still reaches the stage. */
.rescue-sky {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* Each word carries its own position in its transform: puzzle.js flies them,
   frame by frame, so no CSS animation may touch it. */
.word-chip {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  pointer-events: auto;
  background: none;
  border: 1px solid rgba(232, 193, 106, 0.25);
  border-radius: 14px;
  padding: 0.3em 0.7em;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  letter-spacing: 0.06em;
  color: rgba(243, 234, 216, 0.72);
  cursor: pointer;
  transition: opacity 0.6s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.word-chip:hover {
  color: var(--gold);
  border-color: rgba(232, 193, 106, 0.75);
  box-shadow: 0 0 18px rgba(232, 193, 106, 0.25);
}
/* On the table: it is no longer in the sky. */
.word-chip.lifted { opacity: 0; pointer-events: none; }
.word-chip.healed { opacity: 0; }

/* The table: where a word is laid down and put back together. */
.op-table {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: min(20em, 80vw);
  min-height: 6.2em;
  padding: 1em 1.4em;
  border: 1px dashed rgba(232, 193, 106, 0.3);
  border-radius: 20px;
  background: rgba(232, 193, 106, 0.03);
}
.op-call {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--lavender);
  text-align: center;
  transition: opacity 0.4s ease;
}
.op-call.hidden { opacity: 0; }
.rescue .vowel-tray, .rescue .task-note, .rescue .rescue-progress { position: relative; z-index: 3; }

/* The gapped word: the letters sit close, like a real word, and each missing
   vowel is one slim blank the width of a single underscore. */
.puzzle-word {
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  opacity: 0;
}
.puzzle-word.enter { animation: pill-in 0.5s ease forwards; }
.puzzle-word.panic { animation: pill-in 0.5s ease forwards, shake 0.4s ease; }
.puzzle-word.done .tile { border-color: transparent; color: var(--gold); text-shadow: 0 0 14px rgba(232, 193, 106, 0.7); }
.tile {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  text-align: center;
  padding: 0.15em 0.04em;
  color: var(--cream);
  transition: color 0.4s ease, text-shadow 0.4s ease, border-color 0.4s ease;
}
/* One blank per missing vowel: a single underscore's width, no wider. */
.tile.slot {
  min-width: 0.7em;
  border-bottom: 2px solid rgba(232, 193, 106, 0.5);
  color: var(--gold);
}
.tile.slot.filled { border-bottom-color: transparent; }
.puzzle-meaning {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--lavender);
}

/* The vowel tray: unlimited letters. Click one to drop it in the first gap. */
.vowel-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  margin-top: 0.6em;
}
.tile.vowel {
  background: none;
  border: 1px solid rgba(232, 193, 106, 0.4);
  border-radius: 12px;
  color: var(--gold);
  cursor: pointer;
  padding: 0.25em 0.5em;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.1s ease;
}
.tile.vowel:hover { background: rgba(232, 193, 106, 0.1); border-color: var(--gold); }
.tile.vowel:active { transform: translateY(1px); }

/* The healed count, a quiet line under the tray. */
.rescue-progress {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--lavender);
  opacity: 0.7;
}