@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --navy:#08234c;
  --navy-2:#0b3268;
  --card:#0d376f;
  --card-soft:#244a79;
  --line:#38608f;
  --yellow:#ffc72c;
  --green:#2daf58;
  --green-dark:#145b4d;
  --white:#f8fbff;
  --muted:#c5d2e5;
  --red:#ff7272;
  --success:#57db7f;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:var(--navy-2);font-family:"DM Sans",system-ui,sans-serif;color:var(--white)}
button{font:inherit}
.app-shell{width:min(100%,560px);min-height:100dvh;margin:auto;background:linear-gradient(180deg,#154d94 0,#0b3268 16%,#08234c 100%);display:grid;grid-template-rows:auto 1fr auto}
.lesson-header{position:sticky;top:0;z-index:10;padding:9px 12px 13px;background:rgba(5,28,64,.98);border-bottom:1px solid rgba(153,185,225,.3)}
.progress-track{height:9px;border-radius:99px;background:#385478;overflow:hidden}
.progress-bar{height:100%;width:0;border-radius:inherit;background:var(--yellow);transition:width .25s ease}
.title-row{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;margin-top:10px}
.title-row h1{margin:0;text-align:center;font-size:15px;line-height:1.25;font-weight:800}
.icon-button{width:38px;height:34px;border:0;background:transparent;color:#fff;font-size:34px;line-height:1;cursor:pointer}
.stats-row{display:flex;justify-content:space-between;margin-top:9px;color:#d9e4f3;font-size:14px}
.question-panel{min-height:0;padding:17px 12px 108px}
.question-card{min-height:calc(100dvh - 215px);padding:25px 20px;border:1px solid var(--line);border-radius:24px;background:rgba(10,48,99,.93);box-shadow:0 14px 32px rgba(0,0,0,.13);display:flex;flex-direction:column;animation:question-in .2s ease both}
@keyframes question-in{from{opacity:.25;transform:translateX(8px)}to{opacity:1;transform:none}}
.badge{align-self:flex-start;margin-bottom:12px;color:#ffd7ff;font-size:13px;font-weight:800;letter-spacing:.6px}
.instruction{margin:0 0 20px;font-size:23px;line-height:1.2;font-weight:800}
.prompt-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 26px;min-height:88px;text-align:center}
.prompt{margin:0;font-size:clamp(28px,8vw,43px);line-height:1.18;font-weight:800}
.audio-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:106px;min-height:47px;padding:10px 15px;border:1px solid #6585ae;border-radius:99px;background:#234c7e;color:#fff;font-weight:800;cursor:pointer}
.audio-button.primary{min-width:62px;width:62px;height:62px;border:0;border-radius:18px;background:var(--yellow);color:var(--navy);font-size:25px}
.dialogue{display:grid;gap:11px;width:100%;max-width:430px;margin:auto}
.dialogue-label{color:var(--muted);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.speech-bubble{padding:18px;border:1px solid #52739d;border-radius:20px;background:#153e70;font-size:26px;font-weight:700;text-align:left}
.choices{display:grid;gap:12px;margin-top:auto}
.choices.image-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.choice{width:100%;min-height:68px;padding:15px;border:1px solid #52739d;border-radius:17px;background:#244a79;color:#fff;font-size:19px;font-weight:700;text-align:left;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.choice:hover:not(:disabled){transform:translateY(-1px);border-color:#8cb1df}
.choice.selected{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,199,44,.22)}
.choice.correct{border-color:var(--success);background:#175a51}
.choice.wrong{border-color:var(--red);background:#713e54}
.choice:disabled{cursor:default}
.image-choice{display:flex;flex-direction:column;min-height:190px;padding:8px;text-align:center}
.image-placeholder{display:grid;place-items:center;aspect-ratio:1;border:1px dashed #6f8eb5;border-radius:14px;background:#173c6c;color:#b9cae0;font-size:13px;line-height:1.3;padding:8px;overflow:hidden}
.image-placeholder img{width:100%;height:100%;object-fit:contain;border-radius:12px}
.image-placeholder img + .fallback-label{display:none}
.image-choice .choice-label{display:block;margin-top:10px;font-size:15px;text-align:center}
.feedback{display:none;margin-top:18px;padding:14px 16px;border-radius:15px;font-size:17px;font-weight:700;white-space:pre-line;line-height:1.45}
.feedback.visible{display:block}
.feedback.good{background:#174d44;color:#baffc9;border:1px solid #3a8e68}
.feedback.bad{background:#603d50;color:#ffd6da;border:1px solid #a35c68}
.audio-footer{display:flex;justify-content:flex-end;margin-top:20px}
.word-bank,.answer-line{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:62px;padding:12px;border-radius:16px}
.answer-line{margin:10px 0 20px;border-bottom:2px solid #4a6a94;border-radius:0}
.word-chip{padding:12px 16px;border:1px solid #6685aa;border-radius:14px;background:#244a79;color:#fff;font-size:18px;font-weight:800;cursor:pointer}
.word-chip.in-answer{background:#1a5a69;border-color:#43a6aa}
.bottom-nav{position:fixed;z-index:20;bottom:0;left:50%;width:min(100%,560px);transform:translateX(-50%);display:grid;grid-template-columns:1fr 1.45fr;gap:11px;padding:11px 12px calc(11px + env(safe-area-inset-bottom));background:#061d41;border-top:1px solid #34557f}
.nav-button{min-height:55px;border:0;border-radius:14px;color:#fff;font-size:17px;font-weight:800;cursor:pointer}
.nav-button.previous{background:var(--green)}
.nav-button.next{background:var(--green)}
.nav-button:disabled{background:var(--green-dark);color:#9eb7b1;cursor:not-allowed}
.completion{display:flex;flex-direction:column;gap:17px}
.completion h2{margin:0;font-size:28px;line-height:1.2}
.completion p{margin:0;color:var(--muted);font-size:18px}
.score-card{padding:16px;border:1px solid var(--yellow);border-radius:15px;color:var(--yellow);font-size:20px;font-weight:800;text-align:center;background:#203e64}
.mastery-list,.phrase-list{display:grid;gap:9px}
.mastery-item,.phrase-item{padding:13px;border-radius:12px;background:#244a79}
.phrase-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.phrase-item button{flex:0 0 auto;width:42px;height:42px;border:1px solid #6685aa;border-radius:50%;background:#315783;color:#fff;cursor:pointer}
.reset-button{min-height:52px;border:0;border-radius:14px;background:var(--yellow);color:var(--navy);font-weight:800;font-size:17px;cursor:pointer}
@media(max-width:430px){
  .question-card{padding:22px 17px}
  .instruction{font-size:21px}
  .choices.image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .image-choice:last-child:nth-child(odd){grid-column:1/-1;width:50%;justify-self:center}
}

.help-word{
  position:relative;
  display:inline;
  margin:0;
  padding:0 1px 2px;
  border:0;
  border-bottom:2px dashed rgba(216,230,249,.75);
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  cursor:pointer;
}
.help-word:hover,.help-word:focus-visible{border-bottom-color:var(--yellow);outline:0}
.word-hint{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%);
  width:max-content;
  max-width:190px;
  padding:7px 10px;
  border:1px solid #7797bf;
  border-radius:9px;
  background:#f8fbff;
  color:#08234c;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  pointer-events:none;
}
.word-hint::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#f8fbff;
}

/* Movimento e recuperação de erros — v3.5 */
.question-card{position:relative;overflow:hidden;animation:none;transform-origin:center}
.question-card.enter-next{animation:screen-in-right .34s cubic-bezier(.2,.8,.25,1) both}
.question-card.enter-previous{animation:screen-in-left .34s cubic-bezier(.2,.8,.25,1) both}
.question-card.answer-update{animation:answer-settle .22s ease-out both}
.question-card.static-update{animation:none}
@keyframes screen-in-right{from{opacity:0;transform:translateX(34px) scale(.985)}to{opacity:1;transform:none}}
@keyframes screen-in-left{from{opacity:0;transform:translateX(-34px) scale(.985)}to{opacity:1;transform:none}}
@keyframes answer-settle{0%{transform:scale(.992)}65%{transform:scale(1.004)}100%{transform:none}}

.choice,.word-chip,.nav-button,.audio-button,.reset-button,.phrase-item button{will-change:transform}
.choice:active:not(:disabled),.word-chip:active:not(:disabled),.nav-button:active:not(:disabled),.reset-button:active,.phrase-item button:active{transform:scale(.965)}
.audio-button:active{transform:scale(.94)}
.choice.result-correct{animation:correct-bounce .52s cubic-bezier(.2,.85,.3,1.2) both}
.choice.result-wrong{animation:wrong-shake .46s ease both}
@keyframes correct-bounce{0%{transform:scale(.96)}45%{transform:translateY(-8px) scale(1.035)}72%{transform:translateY(2px) scale(.99)}100%{transform:none}}
@keyframes wrong-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

.feedback.visible{animation:feedback-rise .28s cubic-bezier(.2,.8,.25,1) both}
@keyframes feedback-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.word-chip{animation:chip-pop .2s ease-out both}
@keyframes chip-pop{from{opacity:.25;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}
.answer-line.word-order-correct{animation:correct-line .46s ease both;border-bottom-color:var(--success)}
.answer-line.word-order-wrong{animation:wrong-shake .46s ease both;border-bottom-color:var(--red)}
@keyframes correct-line{0%{transform:scale(.98)}55%{transform:scale(1.025)}100%{transform:none}}

.audio-button.speaking .audio-icon{display:inline-block;animation:audio-pulse .52s ease-in-out infinite alternate}
@keyframes audio-pulse{to{transform:scale(1.22) rotate(-6deg)}}
.help-word.hint-pop .word-hint:not([hidden]){animation:hint-bubble .22s cubic-bezier(.2,.9,.25,1.25) both}
@keyframes hint-bubble{from{opacity:0;transform:translateX(-50%) translateY(6px) scale(.88)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

.progress-bar{position:relative;overflow:hidden}
.progress-bar::after{content:"";position:absolute;inset:0 auto 0 -45%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);opacity:0}
.progress-bar.pulse::after{animation:progress-shine .65s ease-out}
@keyframes progress-shine{0%{left:-45%;opacity:0}25%{opacity:1}100%{left:115%;opacity:0}}

.review-badge{color:#d9ccff;background:rgba(123,93,210,.18);border:1px solid rgba(196,178,255,.35);padding:7px 11px;border-radius:999px;animation:review-pop .35s ease both}
.review-card{box-shadow:0 14px 32px rgba(0,0,0,.13),0 0 0 1px rgba(179,155,255,.18) inset}
@keyframes review-pop{from{opacity:0;transform:translateY(-7px) scale(.9)}to{opacity:1;transform:none}}

.answer-sparkles{position:absolute;z-index:3;inset:0;pointer-events:none}
.answer-sparkles i{position:absolute;color:var(--yellow);font-style:normal;text-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;animation:spark-fly .7s ease-out forwards}
.answer-sparkles i:nth-child(1){left:12%;top:24%;animation-delay:.02s}
.answer-sparkles i:nth-child(2){left:82%;top:22%;animation-delay:.08s}
.answer-sparkles i:nth-child(3){left:20%;top:72%;animation-delay:.12s}
.answer-sparkles i:nth-child(4){left:76%;top:67%;animation-delay:.04s}
.answer-sparkles i:nth-child(5){left:50%;top:12%;animation-delay:.15s}
@keyframes spark-fly{0%{opacity:0;transform:translateY(10px) scale(.45) rotate(0)}35%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(1.25) rotate(70deg)}}

.completion-enter{animation:completion-card .5s cubic-bezier(.2,.8,.25,1) both}
.completion-enter>*:not(.completion-burst){animation:completion-item .45s ease both}
.completion-enter>*:nth-child(2){animation-delay:.08s}
.completion-enter>*:nth-child(3){animation-delay:.14s}
.completion-enter>*:nth-child(4){animation-delay:.2s}
.completion-enter>*:nth-child(5){animation-delay:.26s}
.completion-enter>*:nth-child(6){animation-delay:.32s}
.completion-enter>*:nth-child(7){animation-delay:.38s}
@keyframes completion-card{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes completion-item{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.completion-burst{position:absolute;inset:0;pointer-events:none}
.completion-burst i{position:absolute;font-style:normal;color:var(--yellow);opacity:0;animation:completion-confetti 1.15s ease-out forwards}
.completion-burst i:nth-child(1){left:9%;top:10%;animation-delay:.04s}
.completion-burst i:nth-child(2){left:24%;top:4%;color:#57db7f;animation-delay:.12s}
.completion-burst i:nth-child(3){left:44%;top:9%;color:#ffd7ff;animation-delay:.02s}
.completion-burst i:nth-child(4){left:65%;top:5%;color:#57db7f;animation-delay:.16s}
.completion-burst i:nth-child(5){left:87%;top:12%;animation-delay:.08s}
.completion-burst i:nth-child(6){left:76%;top:25%;color:#ffd7ff;animation-delay:.2s}
.completion-burst i:nth-child(7){left:15%;top:28%;color:#57db7f;animation-delay:.18s}
@keyframes completion-confetti{0%{opacity:0;transform:translateY(-12px) scale(.4) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(58px) scale(1.15) rotate(150deg)}}
.correction-card{padding:13px;border:1px solid #3a8e68;border-radius:13px;background:#174d44;color:#baffc9;font-size:17px;font-weight:800;text-align:center}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}