.vocab-font { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-mono, .typing-area { font-family: 'Fira Code', monospace; }
.typing-area { font-size: clamp(1.25rem, 3.4vw, 1.9rem); line-height: 2.4rem; white-space: pre-wrap; word-break: break-word; cursor: text; }
.typing-cursor { animation: cursor-blink 1s steps(1) infinite; }
@keyframes cursor-blink { 0%, 100% { border-left-color: #6366f1; } 50% { border-left-color: transparent; } }
.target-word { box-shadow: inset 0 -2px 0 #f59e0b; }
.char-err { text-decoration-thickness: 2px; }

/* card flip between stages */
.card-flip { animation: card-flip .55s cubic-bezier(.4, .1, .2, 1); }
@keyframes card-flip { 0% { transform: perspective(900px) rotateX(0); } 50% { transform: perspective(900px) rotateX(90deg); opacity: .4; } 100% { transform: perspective(900px) rotateX(0); } }
.card-shake { animation: card-shake .25s; }
@keyframes card-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* combo */
.combo-hot { border-color: #f59e0b !important; animation: combo-glow 1.2s ease-in-out infinite; }
@keyframes combo-glow { 0%, 100% { box-shadow: 0 0 8px rgba(245,158,11,.35); } 50% { box-shadow: 0 0 26px rgba(245,158,11,.8); } }
.flame { display: inline-block; animation: flame-pulse .9s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flame-pulse { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.25) rotate(3deg); } }
.streak-pop { animation: pop .35s ease-out; }
@keyframes pop { 50% { transform: scale(1.25); } }

/* progress + audio */
.progress-fill { transition: width .45s ease; }
.speaking { animation: speak-pulse .8s ease-in-out infinite; }
@keyframes speak-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.6); } 50% { box-shadow: 0 0 0 10px rgba(99,102,241,0); } }
.star-pop { animation: star-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .typing-cursor { animation: none; } }