/* Spell Ladder only: the clue, the answer field and the spelling shown after a miss. Shared rules are in ../shared/base.css. */
.listen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.listen #say { flex: 1 1 100%; }
.meaning { font-size: 20px; font-weight: 600; margin: 14px 0 0; line-height: 1.3; }
.meaning .label { display: block; margin-bottom: 4px; }
.sentence { color: var(--muted); margin: 8px 0 0; }
.sentence .gap { display: inline-block; min-width: 4em; border-bottom: 2px solid var(--muted); }

.answer { margin-top: 12px; }
.answer .label { display: block; margin-bottom: 6px; }
#answer {
  width: 100%; font: inherit; font-size: 30px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text); background: var(--raised);
  border: 2px solid var(--muted); border-radius: 12px; padding: 12px 14px;
}
.hint-out { min-height: 1.5em; margin: 6px 0; color: var(--accent); font-weight: 600; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.answer-actions [type="submit"] { flex: 1 1 100%; }

.tiles { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 0; }
.tiles span {
  display: inline-grid; place-items: center; min-width: 1.35em; height: 1.7em; padding: 0 2px;
  font-size: clamp(18px, 5vw, 28px); font-weight: 800; border-radius: 6px;
  background: var(--ground); color: var(--text);
}
.tiles span.miss { background: var(--accent); color: var(--ink); }
.yours { color: var(--muted); }
.yours s { color: var(--wrong); text-decoration-thickness: 2px; }
.yours u { color: var(--wrong); text-decoration: none; border-bottom: 2px solid var(--wrong); }
.parts { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }
.tip { border-left: 4px solid var(--accent); padding-left: 12px; }

@media (max-height: 600px) {
  #answer { font-size: 26px; padding: 8px 12px; }
  .meaning { font-size: 18px; margin-top: 10px; }
  .listen { gap: 8px; }
}