/* --- экран повторения — 1b --------------------------------- */
.review-wrap { max-width: 520px; margin: 0 auto; }
.review-intro {
  text-align: center; color: var(--ink-soft); font-size: 16px; font-weight: 500;
  margin: 0 auto var(--sp-5); max-width: 520px; letter-spacing: -.01em;
  animation: itemIn .45s var(--ease) backwards;
}
.review-intro .kar { color: var(--accent); font-weight: 800; }
.review-intro-cram { font-size: 15px; line-height: 1.45; }
.review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

.progress-segs {
  display: flex; gap: 4px; flex: 1; min-width: 0;
}
.progress-seg {
  flex: 1; height: 4px; border-radius: 99px;
  background: var(--paper-deep);
  transition: background .3s var(--ease);
}
.progress-seg.is-done { background: var(--accent); }
.progress-seg.is-current { background: #E8B79C; }

/* legacy solid bar (fallback) */
.progress {
  flex: 1; height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden;
}
.progress > div {
  height: 100%; background: var(--accent); border-radius: 999px;
  transition: width .5s var(--ease);
}
.deck-progress {
  height: 8px; background: var(--paper-deep);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.deck-progress > div {
  background: linear-gradient(90deg, var(--terra-deep), var(--accent-bright));
  position: relative;
}
.deck-progress > div::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 55%);
  pointer-events: none;
}
.review-count {
  font-size: 13px; font-weight: 800; color: var(--ink-faint);
  font-family: var(--font-body); font-variant-numeric: tabular-nums;
  font-style: normal; font-synthesis: none;
}

.flip-scene {
  perspective: 1400px;
  touch-action: pan-y;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.flip-swipe-area {
  position: relative;
  width: 100%;
  overflow: visible;
  border-radius: 26px;
  margin-bottom: var(--sp-3);
  flex: 0 1 auto;
  min-height: 0;
}
.flip-stack {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 26px;
  background: var(--bg-raised);
  border: none;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.flip-stack-1 { transform: translateY(var(--sp-4)) scale(.965); opacity: 1; }
.flip-stack-2 { transform: translateY(28px) scale(.93); opacity: .75; }
/* при вылете карточки стопка чуть «подрастает» на её место */
.flip-scene.is-card-exiting .flip-stack-1 { transform: translateY(6px) scale(.985); transition: transform .5s var(--ease); }
.flip-scene.is-card-exiting .flip-stack-2 { transform: translateY(20px) scale(.955); transition: transform .5s var(--ease); }
.swipe-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity .08s linear;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.flip-scene[data-swipe-dir="left"] .swipe-glow-left {
  opacity: var(--swipe-glow, 0.92);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--danger) 72%, transparent) 0%,
    color-mix(in srgb, var(--danger) 42%, transparent) 42%,
    transparent 78%);
  box-shadow: inset 5px 0 0 color-mix(in srgb, var(--danger) 95%, transparent);
}
.flip-scene[data-swipe-dir="right"] .swipe-glow-right {
  opacity: var(--swipe-glow, 0.92);
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--ok) 72%, transparent) 0%,
    color-mix(in srgb, var(--ok) 42%, transparent) 42%,
    transparent 78%);
  box-shadow: inset -5px 0 0 color-mix(in srgb, var(--ok) 95%, transparent);
}
.flip-scene.is-exit-left .flip-face {
  border-color: var(--danger);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent),
    var(--shadow-lg);
}
.flip-scene.is-exit-right .flip-face {
  border-color: var(--ok);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ok) 28%, transparent),
    var(--shadow-lg);
}
.flip-scene.is-card-exiting .swipe-glow {
  opacity: 0 !important;
  transition: opacity 140ms ease-out;
}
.flip-scene.is-card-exiting .grade-row {
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.flip-scene.is-card-exiting.is-exit-left .flip-face,
.flip-scene.is-card-exiting.is-exit-right .flip-face {
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}
.flip-swipe-wrap.swipe-exiting {
  will-change: transform, opacity;
}
.flip-swipe-wrap.swipe-exiting-left {
  transition: none !important;
  animation: kartCardExitLeft 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
.flip-swipe-wrap.swipe-exiting-right {
  transition: none !important;
  animation: kartCardExitRight 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
/* улёт с дугой вверх и доворотом — как карта, брошенная из колоды */
@keyframes kartCardExitLeft {
  30%  { transform: translate(-18vw, -26px) rotate(-6deg); opacity: 1; }
  100% { transform: translate(calc(-58vw - 48px), 10px) rotate(-13deg); opacity: 0; }
}
@keyframes kartCardExitRight {
  30%  { transform: translate(18vw, -26px) rotate(6deg); opacity: 1; }
  100% { transform: translate(calc(58vw + 48px), 10px) rotate(13deg); opacity: 0; }
}
.flip-scene.is-grading .grade-row,
.flip-scene.is-grading .flip-hint {
  pointer-events: none;
  opacity: 0.35;
}
.flip-swipe-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  will-change: transform;
  transition: transform .55s var(--ease), opacity .28s var(--ease);
}
.flip-swipe-wrap.swipe-dragging {
  transition: none;
}
.flip-swipe-wrap.swipe-animating {
  transition: transform .64s cubic-bezier(0.22, 1, 0.36, 1), opacity .52s var(--ease);
}
.flip-card {
  position: relative; width: 100%; min-height: 220px;
  max-height: min(52dvh, calc(100dvh - 300px));
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3,.08,.16,1), height .3s var(--ease);
  cursor: pointer;
  outline: none;
}
.flip-card:focus,
.flip-card:focus-visible {
  outline: none;
}
.flip-card.flipped { transform: rotateY(180deg); }
.flip-swipe-wrap.flip-dip { animation: flipDip .6s cubic-bezier(.3,.08,.16,1); }
@keyframes flipDip { 0%, 100% { scale: 1; } 45% { scale: .95; } }
.flip-face { transition: box-shadow .3s ease; }
.flip-swipe-wrap.flip-dip .flip-face {
  box-shadow: 0 2px 6px rgba(44,34,25,.05), 0 26px 60px rgba(44,34,25,.16);
}
[data-theme="dark"] .flip-swipe-wrap.flip-dip .flip-face {
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 26px 60px rgba(0,0,0,.55);
}
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--bg-raised); border: none; border-radius: 26px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  padding: 32px; text-align: center; overflow: hidden;
}
.flip-face.backside { transform: rotateY(180deg); }
.flip-side-chip {
  align-self: center;
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 4px;
}
.flip-side-chip.is-front {
  color: var(--accent); background: var(--accent-soft);
}
.flip-side-chip.is-back {
  color: var(--ink-faint); background: var(--bg-sunken);
}
.flip-face .side-label {
  position: absolute; top: var(--sp-3); left: 0; right: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.flip-face-scroll {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-2) var(--sp-1);
}
/* С фото: не скроллим — картинка сжимается, текст всегда виден */
.flip-face:has(img) .flip-face-scroll {
  overflow: hidden;
}
.flip-face-scroll::-webkit-scrollbar { width: 6px; }
.flip-face-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.flip-face-scroll .word {
  font-size: 40px; font-weight: 750; letter-spacing: -.01em;
  white-space: pre-wrap; word-break: break-word; font-family: var(--font-display);
  flex: none; max-width: 100%;
}
.flip-face-scroll .word.small { font-size: 34px; font-weight: 600; }
.flip-face-scroll .word.long { font-size: 28px; font-weight: 500; text-align: left; }
.flip-face-scroll .word b, .flip-face-scroll .word strong { font-weight: 800; }
.flip-face-scroll .word a { color: var(--accent-text); text-decoration: underline; word-break: break-all; }

/* Оборот: определение + описание */
.card-definition {
  font-size: 34px; font-weight: 750; text-align: center;
  line-height: 1.35; white-space: pre-wrap; word-break: break-word; width: 100%;
  font-family: var(--font-display); letter-spacing: -.01em;
  flex: none;
}
.card-definition.long { font-size: 24px; }
.card-definition a { color: var(--accent-text); text-decoration: underline; }
.card-description {
  font-size: 14px; font-weight: 500; text-align: center; line-height: 1.5;
  margin-top: var(--sp-3); width: 100%; max-width: 360px; white-space: pre-wrap; word-break: break-word;
  color: var(--ink-faint); font-style: italic;
  flex: none;
}
.card-description a { color: var(--accent-text); text-decoration: underline; }
.card-description b, .card-description strong { font-weight: 700; }
.card-description u { text-decoration: underline; text-underline-offset: 2px; }
.card-description mark { border-radius: 3px; padding: 0 2px; color: inherit; }
.card-description .rich-hl-terra { background: var(--accent-soft); }
.card-description .rich-hl-green { background: var(--ok-soft); }
.card-description .rich-hl-rose { background: var(--danger-soft); }
.card-description .rich-hl-sand { background: color-mix(in srgb, var(--paper-deep) 55%, #F5E6C8); }
.card-description .rich-hl-sky { background: var(--hl-sky); }
.field-hint {
  font-size: 12px; color: var(--ink-faint); margin: -4px 0 8px;
}
.desc-input {
  min-height: 88px; resize: vertical; line-height: 1.45; text-align: left;
}

.flip-face img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(28vh, 200px);
  border-radius: 14px;
  object-fit: contain;
  flex: 0 1 auto;
  min-height: 0;
  align-self: center;
}
.flip-hint {
  text-align: center; color: var(--ink-muted); font-size: 13.5px; font-weight: 500;
  margin-top: var(--sp-2); flex: none;
}

.card-swap-out { animation: swapOut .3s var(--ease) forwards; }
.card-swap-in { animation: swapIn .5s cubic-bezier(.18,1.25,.4,1); }
@keyframes swapOut { to { opacity: 0; transform: translateX(-48px) rotate(-2deg); } }
@keyframes swapIn { from { opacity: .5; transform: translateY(var(--sp-4)) scale(.955); } }

.grade-row { display: flex; gap: 12px; margin-top: 16px; flex: none; }
/* FSRS: четыре оценки в один ряд на планшете и выше */
@media (min-width: 720px) {
  .grade-row:has(.hard) { flex-wrap: nowrap; }
  .grade-row:has(.hard) .grade-btn { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 719px) {
  .grade-row { flex-wrap: wrap; }
  .grade-row .grade-btn { flex: 1 1 calc(50% - 6px); min-width: 0; }
}
.swipe-hint {
  display: none; text-align: center; font-size: 12px; color: var(--ink-muted);
  margin-top: 14px; line-height: 1.35;
}
@media (pointer: coarse) {
  .swipe-hint.visible { display: block; }
}
.keyboard-hint {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 14px;
  line-height: 1.35;
  font-weight: 500;
}
@media (pointer: fine) {
  .keyboard-hint { display: block; }
  .swipe-hint { display: none !important; }
}
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  padding: 4px 0 8px;
}
.stat-tile {
  background: var(--bg-sunken); border-radius: 14px; padding: 14px 12px;
  text-align: center; border: 1px solid var(--line);
}
.stat-tile-val {
  font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--terra-deep);
  font-variant-numeric: tabular-nums;
}
.stat-tile-lab {
  font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.3;
}
@media (min-width: 560px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.grade-btn {
  flex: 1; border: 0; cursor: pointer; border-radius: 999px; padding: 15px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 15px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), opacity var(--dur), filter var(--dur);
  animation: itemIn .3s var(--ease) backwards;
  box-shadow: 0 1px 6px rgba(44,34,25,.08);
}
.grade-btn:hover { transform: translateY(-1px); }
.grade-btn:active { transform: translateY(0); }
.grade-btn small { font-family: var(--font-body); font-weight: 700; font-size: 11px; opacity: .78; }
/* 2-grade (leitner/sm2): белая «не знаю» + ink «знаю» */
.grade-row:not(:has(.hard)) .grade-btn.again {
  background: var(--bg-raised); color: var(--danger-text);
  box-shadow: 0 1px 6px rgba(44,34,25,.08);
}
.grade-row:not(:has(.hard)) .grade-btn.again:hover {
  box-shadow: 0 6px 16px rgba(166,58,50,.18);
}
.grade-row:not(:has(.hard)) .grade-btn.good {
  background: var(--ink); color: #fff;
  box-shadow: none;
}
.grade-row:not(:has(.hard)) .grade-btn.good:hover {
  box-shadow: 0 6px 16px rgba(28,22,17,.28);
}
[data-theme="dark"] .grade-row:not(:has(.hard)) .grade-btn.good { color: var(--bg); }
/* FSRS 4-grade */
.grade-row:has(.hard) .grade-btn.again { background: var(--danger-soft); color: var(--danger-text); }
.grade-row:has(.hard) .grade-btn.hard { background: var(--bg-sunken); color: var(--ink-soft); }
.grade-row:has(.hard) .grade-btn.good { background: var(--ok-soft); color: var(--ok-text); }
.grade-row:has(.hard) .grade-btn.easy { background: var(--accent); color: #fff; }
.grade-btn small { opacity: .82; }
/* стрелки направления свайпа */
.grade-btn.again, .grade-btn.good { position: relative; }
.grade-btn.again::before, .grade-btn.good::after {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 17px; font-weight: 800; opacity: .45; line-height: 1;
}
.grade-btn.again::before { content: '\2190'; left: 14px; }
.grade-btn.good::after  { content: '\2192'; right: 14px; }

.review-done {
  text-align: center;
  padding: 44px 32px;
  background: var(--bg-raised);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  animation: cardIn .4s var(--ease);
  overflow: hidden;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
}
.review-done-raven {
  width: 64px; height: 64px; margin: 0 auto;
  object-fit: contain; display: block;
}
.review-done h2 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.02em;
}
.review-done-sub {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-faint);
  margin: 4px 0 0;
}
.review-done-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}
.review-done-stat {
  border-radius: 16px;
  padding: 14px 24px;
  min-width: 100px;
}
.review-done-stat.is-ok { background: var(--ok-soft); }
.review-done-stat.is-fail { background: var(--danger-soft); }
.review-done-stat-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.review-done-stat.is-ok .review-done-stat-val,
.review-done-stat.is-ok .review-done-stat-lab { color: var(--ok-text); }
.review-done-stat.is-fail .review-done-stat-val,
.review-done-stat.is-fail .review-done-stat-lab { color: var(--danger-text); }
.review-done-stat-lab {
  font-weight: 600;
  font-size: 11.5px;
  margin-top: 2px;
}
.review-done-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.review-done-again {
  border-radius: 999px !important;
  padding: 12px 24px !important;
  box-shadow: 0 6px 16px rgba(196,85,40,.28);
}
.review-done-home {
  border-radius: 999px !important;
  padding: 12px 24px !important;
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
  color: var(--ink) !important;
  border: 0 !important;
}
.review-done-home:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent) !important;
}
.review-wrap--done {
  display: flex;
  flex-direction: column;
  min-height: calc(
    100dvh - var(--header-h, 66px) - var(--main-pad-y) - 72px
    - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
}
.review-wrap--done > :last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.review-wrap--done .review-done {
  overflow: visible;
  padding: 44px 32px;
}
.review-wrap--done .review-done .btn {
  margin-top: 0;
  width: auto;
  min-width: 0;
}
.review-done .stats-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); max-width: 360px; margin: 18px auto 22px; }
.review-done .crow { width: 96px; height: 96px; margin: 0 auto 18px; color: var(--accent); }
.review-done .crow svg { width: 100%; height: 100%; }
.lesson-reward { margin: 0 auto 18px; width: 100%; max-width: 260px; }
.lesson-reward .trophy-drop {
  display: block; width: 140px; height: 140px; margin: 0 auto;
  object-fit: contain;
  animation: trophyDrop 1.1s var(--ease) both, trophySway 2.8s ease-in-out 1.1s infinite;
  transform-origin: 50% 88%;
}
.lesson-stars {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(8px, 3vw, 14px); margin-top: 4px; min-height: 48px;
  width: 100%;
}
.lesson-star {
  width: clamp(38px, 11vw, 46px); height: clamp(38px, 11vw, 46px);
  flex: none; object-fit: contain; opacity: 0;
  animation: starDrop .85s cubic-bezier(.22, 1, .36, 1) both;
}
.lesson-star.earned { filter: drop-shadow(0 3px 8px rgba(255, 193, 6, .4)); }
.lesson-star.star-1 { animation-delay: .18s; }
.lesson-star.star-2 { animation-delay: .34s; }
.lesson-star.star-3 { animation-delay: .5s; }
.lesson-stars-label {
  margin: 6px 0 0; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: var(--ink-soft); opacity: 0;
  animation: itemIn .4s var(--ease) .72s both; text-align: center;
}
@keyframes starDrop {
  0% { transform: translateY(-100px) rotate(-28deg) scale(.35); opacity: 0; }
  55% { transform: translateY(10px) rotate(10deg) scale(1.14); opacity: 1; }
  78% { transform: translateY(-3px) rotate(-4deg) scale(.96); opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes starDropEmpty {
  0% { transform: translateY(-90px) rotate(22deg) scale(.3); opacity: 0; }
  55% { transform: translateY(8px) rotate(-8deg) scale(1.08); opacity: .45; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: .38; }
}
.review-done .trophy-drop {
  display: block; width: 140px; height: 140px; margin: 0 auto 18px;
  object-fit: contain;
  animation: trophyDrop 1.1s var(--ease) both, trophySway 2.8s ease-in-out 1.1s infinite;
  transform-origin: 50% 88%;
}
@keyframes trophyDrop {
  0% { transform: translateY(-120px) rotate(-18deg) scale(.7); opacity: 0; }
  55% { transform: translateY(8px) rotate(6deg) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes trophySway {
  0%, 100% { transform: translateY(0) rotate(-2.5deg) scale(1); }
  50% { transform: translateY(0) rotate(2.5deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .review-done .trophy-drop,
  .lesson-reward .trophy-drop {
    animation: itemIn .45s var(--ease) both;
    transform-origin: center;
  }
  .lesson-star { animation: itemIn .45s var(--ease) both; opacity: 1; }
}
.review-done h2 { margin: 14px 0 6px; letter-spacing: -.02em; }
.review-done p { color: var(--ink-soft); margin: 0 0 4px; }
.review-done .btn { width: auto; min-width: 160px; }

@media (min-width: 720px) {
  .review-wrap { max-width: 560px; }
  .review-intro { max-width: 560px; font-size: 16px; margin-bottom: 24px; }
  .review-top { gap: 12px; margin-bottom: 20px; }
  .review-count { font-size: 13px; }
  .flip-swipe-area { border-radius: 26px; }
  .flip-card { min-height: 240px; max-height: min(52dvh, calc(100dvh - 300px)); }
  .flip-face {
    padding: 36px 32px;
    border-radius: 26px;
  }
  .flip-face-scroll { gap: 16px; }
  .flip-face-scroll .word { font-size: 40px; }
  .flip-face-scroll .word.small { font-size: 34px; }
  .flip-face-scroll .word.long { font-size: 28px; }
  .card-definition { font-size: 34px; }
  .card-definition.long { font-size: 24px; }
  .card-description { font-size: 14px; margin-top: 12px; }
  .flip-face img { max-height: min(32vh, 240px); border-radius: 16px; }
  .flip-hint { font-size: 13.5px; margin-top: 14px; }
  .grade-row { gap: 12px; margin-top: 26px; }
  .grade-btn { padding: 15px 12px; font-size: 15px; border-radius: 999px; }
}

@media (max-width: 520px) {
  .flip-card { min-height: 200px; max-height: min(46dvh, calc(100dvh - 280px)); }
  .flip-face { padding: 20px 16px; border-radius: 20px; }
  .flip-face-scroll .word { font-size: clamp(28px, 8vw, 52px); }
  .flip-face-scroll .word.small { font-size: clamp(22px, 6vw, 38px); }
  .flip-face-scroll .word.long { font-size: clamp(18px, 5vw, 32px); }
  .card-definition { font-size: clamp(17px, 4.5vw, 22px); }
  .card-definition.long { font-size: 15px; }
  .card-description { font-size: 14px; }
  .flip-face img { max-height: min(26vh, 180px); }
  .grade-btn { min-height: 48px; padding: 10px 4px 9px; font-size: 14px; }
  .grade-row { gap: 8px; margin-top: 16px; }
  .grade-row .grade-btn { flex: 1 1 calc(50% - 4px); }
  .review-top { gap: 10px; margin-bottom: 14px; }
  .review-intro { font-size: 15px; margin-bottom: 16px; }
  .study-prompt-card { padding: 22px 16px; }
  .study-prompt-card .word { font-size: clamp(28px, 8vw, 46px); }
  .study-voice-card {
    min-height: min(52dvh, 440px);
    padding-top: clamp(8px, 2.5dvh, 20px);
  }
  .study-voice-card .study-prompt-card {
    min-height: min(34dvh, 280px);
    padding: clamp(28px, 6dvh, 40px) 18px;
  }
  .study-voice-card .study-voice-actions {
    padding-top: clamp(12px, 3dvh, 22px);
  }
  .study-answer-input { font-size: 16px; }
}