.result-summary {
  display: flex;
  align-items: center;
  gap: 7px;
}

.result-action {
  width: 36px;
  height: 36px;
  padding: 7px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #d8eaf6;
  color: #0d4f8c;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(.2, .8, .2, 1), opacity 150ms ease;
}

.result-action:active { transform: scale(.9); }
.result-action:disabled { opacity: .38; cursor: default; }
.result-action svg { width: 22px; height: 22px; fill: currentColor; }

#play-recognized svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.result-action.playing svg {
  animation: result-action-breathing .25s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}

.score {
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.prompt-card h1 { font-size: 36px; }
.phoneme-symbol { font-size: 24px; line-height: 24px; }

/* Match the compact vertical measurements used by PracticeScreen on Android. */
.practice-screen {
  gap: 14px;
}

.prompt-card,
.pronunciation-card {
  padding: 14px;
  border-width: 1px;
  border-radius: 18px;
}

.prompt-card {
  min-height: 132px;
}

.prompt-card h1 {
  margin: 8px 0 6px;
}

.prompt-card .ipa {
  font-size: 24px;
}

.sample-actions {
  gap: 12px;
}

.sample-actions .outline-action {
  height: 44px;
  padding: 0 14px;
  border-width: 1px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.record-area #record-error:empty {
  display: none;
}

.record-area #record-error {
  margin: 4px 0 0;
  min-height: 0;
}

.practice-screen > .next-button {
  height: 40px;
  border-radius: 12px;
  font-size: 16px;
}

.practice-screen > .next-button span {
  font-size: 22px;
}

@keyframes result-action-breathing {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .result-action,
  .result-action.playing svg {
    animation: none;
    transition: none;
  }
}