/* Daily Tongue Twisters (docs/tongue-twisters/PRD.md §4). Uses the shell's
   tokens from styles.css; correct words are green AND bold, so the result is
   never told by colour alone. */

.twister-view h1 { max-width: none; }
.twister-view[hidden], .twister-card[hidden] { display: none; }

.twister-levels { display: flex; gap: .5rem; margin: 1rem 0; }
.twister-levels button { flex: 1; min-height: 44px; }
.twister-levels button[aria-pressed="true"] { color: white; background: var(--accent-dark); border-color: var(--accent-dark); }

.twister-card {
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px solid rgb(23 51 44 / 12%);
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: 0 1rem 3rem rgb(35 42 36 / 8%);
}

.twister-phrase-row { display: flex; align-items: flex-start; gap: .85rem; }
.twister-audio { display: flex; flex: 0 0 auto; gap: .4rem; }
.twister-icon-button {
  display: grid;
  width: 44px;
  min-height: 44px;
  padding: 0;
  place-content: center;
  border: 1px solid var(--accent);
  border-radius: .75rem;
  color: var(--accent-dark);
  background: transparent;
}
.twister-icon-button:hover { color: white; background: var(--accent-dark); }
.twister-text-block { flex: 1; min-width: 0; }
.twister-text {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 5.5vw, 1.8rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.twister-translation { margin: .45rem 0 0; color: var(--muted); line-height: 1.45; }
/* Persian (PRD §13): the Latin reading sits between the twister and its translation. */
.twister-transliteration { margin: .35rem 0 0; font-style: italic; line-height: 1.45; }

.twister-consent { margin-top: 1rem; padding: .9rem 1rem; border-radius: .75rem; background: #edf0e9; line-height: 1.45; }
.twister-consent p { margin: 0 0 .75rem; }
.twister-consent[hidden], .twister-start[hidden], .twister-recorder[hidden] { display: none; }
.twister-start, .twister-recorder { margin-top: 1rem; }
.twister-again-slot .twister-recorder { margin-top: .75rem; }

.twister-best { margin: 1rem 0 0; color: var(--success); font-weight: 750; font-size: 1.05rem; }
.twister-best[hidden] { display: none; }

.twister-attempts { display: grid; gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.twister-attempt { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: .8rem; background: white; }
.twister-attempt-head { display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.twister-attempt-time { font-variant-numeric: tabular-nums; }
.twister-attempt-phrase { margin: .35rem 0 0; font-size: 1.1rem; line-height: 1.45; overflow-wrap: anywhere; }
.twister-word-correct { color: var(--success); font-weight: 800; }
.twister-attempt-summary { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; }
.twister-attempt.all-correct { border-color: var(--success); }

.twister-again-slot { margin-top: .75rem; }
.twister-better-luck { margin: 1rem 0 0; font-family: Georgia, serif; font-size: 1.35rem; text-align: center; }
.twister-better-luck[hidden] { display: none; }

@media (max-width: 380px) {
  .twister-phrase-row { flex-direction: column; }
}