/* Presentation only. A recorded reading earns a brief acknowledgement;
   the lesson text, controls, stage state and storage remain owned by the app. */
.learning-completion-slot {
  width: 100%;
  height: 64px;
  min-height: 64px;
  flex: 0 0 auto;
}
.ttobak-completion-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 64px;
  min-height: 64px;
  flex: 0 0 auto;
  visibility: hidden;
  pointer-events: none;
  color: #254c42;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.ttobak-completion-row:is(
  [data-completion-state='recording'],
  [data-completion-state='celebrating'],
  [data-completion-state='settled']
) { visibility: visible; }
.ttobak-completion-ddori {
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 85%;
  pointer-events: none;
}
.ttobak-completion-badge {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid #d8c16c;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  background: radial-gradient(ellipse at 26% 18%, #fff6cb 0, transparent 70%), #f2d976;
  color: #254c42;
  box-shadow: inset 1px 2px 1px #fff6cb, 0 2px 0 #c6af62, 0 5px 8px -6px #254c423b;
  font: 700 21px/1 'Ttobak Learning', 'Segoe UI Symbol', sans-serif;
  transform-origin: center;
  pointer-events: none;
}
.ttobak-completion-copy {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #254c42;
  font: 700 16px/1.45 'Ttobak Learning', 'Noto Sans CJK KR', 'Malgun Gothic', sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.ttobak-completion-copy :is(strong, span, small, p) {
  margin: 0;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.ttobak-completion-copy strong { display: block; font: inherit; }
.ttobak-completion-copy small {
  display: block;
  color: #526052;
  font-size: 14px;
  font-weight: 400;
}
/* Keep the same one-shot animation through settling so a delayed first paint
   can finish its 700ms run without restarting at the state boundary. */
.ttobak-completion-row:is([data-completion-state='celebrating'], [data-completion-state='settled']) .ttobak-completion-ddori {
  animation: ttobak-completion-ddori-once 700ms ease-out 1 both;
}
.ttobak-completion-row:is([data-completion-state='celebrating'], [data-completion-state='settled']) .ttobak-completion-badge {
  animation: ttobak-completion-seal-once 700ms ease-out 1 both;
}
@keyframes ttobak-completion-ddori-once {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-3px) scale(1.025); }
  65% { transform: translateY(-1px) scale(1.01); }
}
@keyframes ttobak-completion-seal-once {
  0% { opacity: .7; transform: scale(.98); }
  35% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}

/* Only prose action controls respond to pressing. Educational choice cards,
   rotating consonants, reading glyphs and their containing boards stay still. */
.tt-learning-app :is(
  .learning-tools button,
  .learning-home-link,
  button[data-ui='navBtnStyle'],
  button[data-ui='navBtnAccentStyle'],
  button[data-ui$='ListenBtnStyle'],
  button[data-ui='smallActionBtnStyle'],
  button[data-ui='smallActionMutedStyle'],
  button[data-ui='breadcrumbStyle'],
  [data-ui='attemptButtonRowStyle'] button,
  [data-ui='stageControlRowStyle'] button
) {
  transition: background-color 130ms ease-out, box-shadow 130ms ease-out !important;
  transform: none !important;
}
.tt-learning-app :is(
  .learning-tools button,
  .learning-home-link,
  button[data-ui='navBtnStyle'],
  button[data-ui='navBtnAccentStyle'],
  button[data-ui$='ListenBtnStyle'],
  button[data-ui='smallActionBtnStyle'],
  button[data-ui='smallActionMutedStyle'],
  button[data-ui='breadcrumbStyle'],
  [data-ui='attemptButtonRowStyle'] button,
  [data-ui='stageControlRowStyle'] button
):active:not(:disabled):not([aria-disabled='true']) {
  box-shadow: inset 0 2px 3px #254c4226 !important;
}
.tt-learning-app [data-ui='attemptButtonRowStyle'] button {
  position: relative;
}
.tt-learning-app [data-ui='attemptButtonRowStyle'] button::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: #356c56;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  pointer-events: none;
}
.tt-learning-app [data-ui='attemptButtonRowStyle'] button:is(
  [data-learning-button-phase='recording'],
  [data-learning-button-phase='recorded']
) {
  outline: 2px solid #77966a;
  outline-offset: 1px;
  box-shadow: inset 0 1px 3px #254c4226 !important;
  transform: none !important;
}
.tt-learning-app [data-ui='attemptButtonRowStyle'] button[data-learning-button-phase='recording']::after {
  opacity: .55;
  transform: scaleX(.4);
}
.tt-learning-app [data-ui='attemptButtonRowStyle'] button[data-learning-button-phase='recorded']::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 619px) {
  .learning-completion-slot { height: 56px; min-height: 56px; }
  .ttobak-completion-row { height: 56px; min-height: 56px; gap: 8px; }
  .ttobak-completion-ddori { width: 48px; height: 48px; flex-basis: 48px; }
  .ttobak-completion-badge { width: 32px; height: 32px; flex-basis: 32px; font-size: 19px; }
  .ttobak-completion-copy { font-size: 15px; }
  .ttobak-completion-copy small { font-size: 13px; }
}
@media (forced-colors: active) {
  .ttobak-completion-row, .ttobak-completion-copy, .ttobak-completion-copy small {
    color: CanvasText;
  }
  .ttobak-completion-badge {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
  .tt-learning-app :is(
    .learning-tools button,
    .learning-home-link,
    button[data-ui='navBtnStyle'],
    button[data-ui='navBtnAccentStyle'],
    button[data-ui$='ListenBtnStyle'],
    button[data-ui='smallActionBtnStyle'],
    button[data-ui='smallActionMutedStyle'],
    button[data-ui='breadcrumbStyle'],
    [data-ui='attemptButtonRowStyle'] button,
    [data-ui='stageControlRowStyle'] button
  ):active:not(:disabled):not([aria-disabled='true']) { box-shadow: none !important; }
  .tt-learning-app [data-ui='attemptButtonRowStyle'] button:is(
    [data-learning-button-phase='recording'],
    [data-learning-button-phase='recorded']
  ) {
    background: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText !important;
    outline-color: Highlight;
    box-shadow: none !important;
  }
  .tt-learning-app [data-ui='attemptButtonRowStyle'] button::after { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .ttobak-completion-row, .ttobak-completion-row *,
  .tt-learning-app :is(
    .learning-tools button,
    .learning-home-link,
    button[data-ui='navBtnStyle'],
    button[data-ui='navBtnAccentStyle'],
    button[data-ui$='ListenBtnStyle'],
    button[data-ui='smallActionBtnStyle'],
    button[data-ui='smallActionMutedStyle'],
    button[data-ui='breadcrumbStyle'],
    [data-ui='attemptButtonRowStyle'] button,
    [data-ui='stageControlRowStyle'] button
  ),
  .tt-learning-app [data-ui='attemptButtonRowStyle'] button::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}