/* =====================================================================
   English for All - estilos globais (complementam o Tailwind via CDN)
   Mobile-first: tudo e pensado para 360px de largura e toque.
   ===================================================================== */

:root {
  --efa-blue: #2563eb;
  --efa-blue-dark: #1e3a8a;
  --efa-yellow: #facc15;
  --efa-green: #22c55e;
  --efa-red: #ef4444;
  --touch: 48px; /* alvo minimo de toque */
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Qualquer botao ou alvo interativo tem no minimo 48px */
button, a.btn, [role="button"], input, select { min-height: var(--touch); }

/* Animacao leve do logo da pagina Hello */
@keyframes efa-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.logo-bounce { animation: efa-bounce 2.4s ease-in-out infinite; }

/* Respeita quem desativou animacoes no sistema */
@media (prefers-reduced-motion: reduce) {
  .logo-bounce { animation: none; }
}

/* =====================================================================
   Mascotes (public/js/characters.js)
   Estado = classe no .efa-char: is-normal | is-celebrate | is-think
   ===================================================================== */
.efa-char { display: inline-block; position: relative; user-select: none; -webkit-user-select: none; }
.efa-char svg { width: 100%; height: 100%; overflow: visible; }
.efa-char .char-body { transform-origin: 100px 190px; transition: transform .35s ease; }

/* partes que mudam com o estado */
.efa-char .char-wing, .efa-char .char-arm, .efa-char .char-pupils, .efa-char .char-antennae {
  transition: transform .35s ease;
}
.efa-char .char-wing-left  { transform-origin: 52px 96px; }
.efa-char .char-wing-right { transform-origin: 148px 96px; }
.efa-char-nina .char-wing-left  { transform-origin: 96px 110px; }
.efa-char-nina .char-wing-right { transform-origin: 104px 110px; }
.efa-char .char-arm-left  { transform-origin: 72px 104px; }
.efa-char .char-arm-right { transform-origin: 128px 104px; }
.efa-char .char-antennae  { transform-origin: 100px 70px; }

/* ocultos por padrao */
.efa-char .char-sparkles, .efa-char .char-happy-eyes, .efa-char .char-dots, .efa-char .char-brow {
  opacity: 0; transition: opacity .25s ease;
}

/* --- respiracao suave no estado normal --- */
@keyframes efa-breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
.efa-char.is-normal .char-body { animation: efa-breathe 3.2s ease-in-out infinite; }
/* borboleta bate asas devagar sempre */
@keyframes efa-flap-slow { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
.efa-char-nina.is-normal .char-wing { animation: efa-flap-slow 2.4s ease-in-out infinite; }

/* --- COMEMORANDO --- */
@keyframes efa-jump {
  0%,100% { transform: translateY(0) rotate(0); }
  30%     { transform: translateY(-18px) rotate(-4deg); }
  60%     { transform: translateY(0) rotate(0); }
  80%     { transform: translateY(-8px) rotate(3deg); }
}
@keyframes efa-twinkle { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@keyframes efa-flap-fast { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
.efa-char.is-celebrate .char-body { animation: efa-jump .9s ease-in-out infinite; }
.efa-char.is-celebrate .char-sparkles { opacity: 1; animation: efa-twinkle .6s ease-in-out infinite; transform-origin: center; }
.efa-char.is-celebrate .char-happy-eyes { opacity: 1; }
.efa-char.is-celebrate .char-pupils { opacity: 0; }
.efa-char.is-celebrate .char-wing-left  { transform: rotate(-60deg) translateY(-10px); }
.efa-char.is-celebrate .char-wing-right { transform: rotate(60deg) translateY(-10px); }
.efa-char-nina.is-celebrate .char-wing-left,
.efa-char-nina.is-celebrate .char-wing-right { transform: none; animation: efa-flap-fast .35s ease-in-out infinite; }
.efa-char.is-celebrate .char-arm-left  { transform: rotate(-70deg); }
.efa-char.is-celebrate .char-arm-right { transform: rotate(70deg); }

/* --- PENSANDO --- */
@keyframes efa-dots { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }
@keyframes efa-tilt { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(-7deg); } }
.efa-char.is-think .char-body { animation: efa-tilt 2s ease-in-out infinite; }
.efa-char.is-think .char-dots { opacity: 1; animation: efa-dots 1.2s ease-in-out infinite; }
.efa-char.is-think .char-pupils { transform: translate(5px, -6px); }
.efa-char.is-think .char-brow { opacity: 1; }
/* Ollie leva a asa direita ao bico; Snowy leva o galho ao queixo */
.efa-char-ollie.is-think .char-wing-right { transform: rotate(-75deg) translate(-30px, -15px); }
.efa-char-snowy.is-think .char-arm-right  { transform: rotate(-95deg) translate(-10px, -6px); }
.efa-char-nina.is-think .char-antennae    { transform: rotate(12deg); }

@media (prefers-reduced-motion: reduce) {
  .efa-char * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Baloes de fala
   ===================================================================== */
.efa-bubble {
  position: relative;
  background: #fff;
  color: #1f2937;
  border-radius: 18px;
  padding: 12px 16px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  font-size: 1.05rem;
  line-height: 1.45;
  min-height: 56px;
  max-width: 100%;
  border: 3px solid var(--bubble-color, #1e3a8a);
}
.efa-bubble-ollie { --bubble-color: #1e3a8a; }
.efa-bubble-nina  { --bubble-color: #7c3aed; }
.efa-bubble-snowy { --bubble-color: #0369a1; }
.efa-bubble-who {
  display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--bubble-color); margin-bottom: 4px;
}
.efa-bubble-text b { color: var(--bubble-color); font-weight: 800; }
.efa-bubble-text i { font-style: italic; color: #374151; }
/* rabinho do balao */
.efa-bubble::after {
  content: ""; position: absolute; top: 24px; width: 0; height: 0;
  border: 12px solid transparent;
}
.efa-bubble-left::after  { left: -24px; border-right-color: var(--bubble-color); }
.efa-bubble-right::after { right: -24px; border-left-color: var(--bubble-color); }
/* cursor piscando enquanto digita */
@keyframes efa-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.efa-bubble.is-typing .efa-bubble-text::after {
  content: "▍"; color: var(--bubble-color); animation: efa-caret .7s step-end infinite; margin-left: 1px;
}

/* figuras do vocabulario */
.efa-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.efa-icon-svg { width: 100%; height: 100%; display: block; }

/* =====================================================================
   Telas, toasts e confete
   ===================================================================== */
@keyframes efa-screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.efa-screen-in { animation: efa-screen-in .3s ease both; }
.efa-toast { transition: opacity .3s, transform .3s; }
.efa-toast.is-out { opacity: 0; transform: translateY(10px); }

.efa-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.efa-confetti i { position: absolute; top: -20px; display: block; border-radius: 2px; animation: efa-fall linear forwards; opacity: .95; }
@keyframes efa-fall {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(720deg); opacity: .6; }
}

/* =====================================================================
   Exercicios (public/js/exercises.js)
   ===================================================================== */
.efa-exercise { color: #fff; }
.efa-prompt-pt { font-style: italic; }
.efa-blank {
  display: inline-block; min-width: 4ch; padding: 0 .35em; margin: 0 .15em;
  border-bottom: 3px dashed rgba(255,255,255,.8); color: #fde68a; font-weight: 800;
}
.efa-blank.is-filled { border-bottom-style: solid; background: rgba(255,255,255,.15); border-radius: 6px; }

/* blocos de alternativa */
.efa-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 96px; padding: 12px 10px; border-radius: 16px; color: #fff; font-weight: 800;
  font-size: 1.1rem; line-height: 1.2; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.25);
  transition: transform .08s, filter .2s, opacity .2s; -webkit-tap-highlight-color: transparent;
}
.efa-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.efa-opt-shape { width: 22px; height: 22px; opacity: .9; }
.efa-opt-tall { min-height: 140px; font-size: 1.4rem; }
.efa-opt-icon { font-size: 2.6rem; line-height: 1; }
.is-locked .efa-opt { opacity: .55; }
.is-locked .efa-opt.is-chosen { opacity: 1; outline: 4px solid #fff; }
.efa-opt.is-right { opacity: 1 !important; outline: 4px solid #fff; animation: efa-pulse .5s 2; }
.efa-opt.is-wrong { opacity: .5 !important; filter: grayscale(.6); }
@keyframes efa-pulse { 50% { transform: scale(1.04); } }

/* fichas (palavras) */
.efa-chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px;
  border-radius: 999px; background: #fff; color: #1e3a8a; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 3px 0 rgba(0,0,0,.2); touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .08s, background .2s;
}
.efa-chip:active { transform: translateY(2px); }
.efa-chip.is-selected { background: #fde68a; outline: 3px solid #f59e0b; }
.efa-chip.is-dragging { opacity: .35; }
.efa-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; transform: translate(-100px,-100px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.efa-bank { min-height: 56px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.12); }

/* linha da frase (ordenar) */
.efa-line {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; padding: 8px; border-radius: 16px;
  background: rgba(255,255,255,.18); border: 3px dashed rgba(255,255,255,.6);
}
.efa-line.is-empty::before { content: "toque nas palavras na ordem certa"; opacity: .7; font-size: .9rem; align-self: center; padding-left: 6px; }
.efa-line .efa-chip { background: #fde68a; }

/* zonas do ligar */
.efa-zone {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px; padding: 10px 8px;
  border-radius: 16px; background: rgba(255,255,255,.16); border: 3px dashed rgba(255,255,255,.6); text-align: center;
  font-weight: 700; font-size: .95rem; line-height: 1.2; transition: background .15s, transform .15s;
}
.efa-zone.is-over { background: rgba(253,230,138,.45); transform: scale(1.03); border-style: solid; }
.efa-zone.is-filled { border-style: solid; background: rgba(255,255,255,.26); }
.efa-zone-label { flex: 1; display: flex; align-items: center; justify-content: center; }
.efa-zone-slot { min-height: 48px; width: 100%; display: flex; justify-content: center; }
.efa-zone-slot .efa-chip { background: #bbf7d0; color: #14532d; }

/* botoes */
.efa-confirm {
  min-height: 56px; padding: 0 28px; border-radius: 999px; background: #facc15; color: #1e3a8a;
  font-weight: 900; font-size: 1.15rem; box-shadow: 0 4px 0 #ca8a04; transition: transform .08s, opacity .2s;
}
.efa-confirm:active { transform: translateY(3px); box-shadow: 0 1px 0 #ca8a04; }
.efa-confirm:disabled { opacity: .45; }
.efa-bigspeak {
  display: inline-flex; align-items: center; gap: 5px; min-height: 52px; padding: 0 13px; border-radius: 999px;
  background: #fff; color: #1e3a8a; font-weight: 800; font-size: 1.1rem; box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
.efa-bigspeak span { font-size: .9rem; }
.efa-bigspeak:active { transform: translateY(2px); }
.efa-bigspeak.is-slow { background: #dcfce7; color: #14532d; }
.efa-bigspeak.is-spell { background: #fef3c7; color: #78350f; }

/* ditado */
.efa-spell-input {
  width: 100%; min-height: 64px; border-radius: 16px; border: 3px solid #fff; background: rgba(255,255,255,.95);
  color: #1e3a8a; font-size: 1.8rem; font-weight: 800; text-align: center; letter-spacing: .08em; padding: 8px 12px;
}
.efa-spell-input:focus { outline: 4px solid #facc15; }
.efa-spell-feedback { background: rgba(255,255,255,.12); border-radius: 14px; padding: 10px 12px; }
.efa-spell-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.efa-spell-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; min-width: 96px; }
.efa-letters { display: flex; flex-wrap: wrap; gap: 4px; }
.efa-letter {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 36px; padding: 0 4px;
  border-radius: 8px; font-weight: 900; font-size: 1.25rem; font-family: ui-monospace, monospace;
}
.efa-letter.is-ok { background: #22c55e; color: #fff; }
.efa-letter.is-bad { background: #ef4444; color: #fff; text-decoration: line-through; }
.efa-letter.is-missing { background: #fff; color: #b91c1c; border: 2px solid #ef4444; }

/* feedback */
.efa-feedback-card { color: #1f2937; }
.efa-feedback-card .efa-spell-feedback { background: #f1f5f9; }

/* =====================================================================
   Quiz: timer circular, placar, fundos, podio
   ===================================================================== */
.efa-timer { position: relative; width: 72px; height: 72px; }
.efa-timer svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.efa-timer circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.efa-timer .track { stroke: rgba(255,255,255,.25); }
.efa-timer .bar { stroke: #22c55e; transition: stroke .3s; }
.efa-timer.is-warn .bar { stroke: #facc15; }
.efa-timer.is-danger .bar { stroke: #ef4444; }
.efa-timer .num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.35rem; color: #fff;
}
.efa-timer.is-danger .num { animation: efa-pulse .5s infinite; }

.efa-streak { transition: transform .2s; }
.efa-streak.is-bump { animation: efa-bump .4s; }
@keyframes efa-bump { 30% { transform: scale(1.4) rotate(-8deg); } }

/* fundos por questao */
.efa-bg-0 { background: linear-gradient(160deg, #1d4ed8, #3b82f6); }
.efa-bg-1 { background: linear-gradient(160deg, #7e22ce, #a855f7); }
.efa-bg-2 { background: linear-gradient(160deg, #0f766e, #14b8a6); }
.efa-bg-3 { background: linear-gradient(160deg, #be123c, #f43f5e); }
.efa-bg-4 { background: linear-gradient(160deg, #c2410c, #f97316); }
.efa-bg-5 { background: linear-gradient(160deg, #15803d, #22c55e); }
.efa-bg-6 { background: linear-gradient(160deg, #4338ca, #6366f1); }
.efa-bg-7 { background: linear-gradient(160deg, #0369a1, #0ea5e9); }
.efa-bg-ok { background: linear-gradient(160deg, #15803d, #22c55e); }
.efa-bg-bad { background: linear-gradient(160deg, #b91c1c, #ef4444); }
.efa-bg-neutral { background: linear-gradient(160deg, #1e3a8a, #2563eb); }
.efa-bg-transition { transition: background .4s; }

/* pontos voando */
@keyframes efa-points { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 30% { opacity: 1; transform: translateY(-6px) scale(1.15); } 100% { opacity: 1; transform: none; } }
.efa-points { animation: efa-points .6s ease both; }

/* podio */
.efa-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 190px; }
.efa-podium-step {
  width: 84px; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  color: #1e3a8a; font-weight: 900; animation: efa-rise .8s ease both; transform-origin: bottom;
}
.efa-podium-step .who { margin-bottom: 6px; font-size: 2rem; line-height: 1; }
.efa-podium-step .who small { display: block; font-size: .7rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); margin-top: 2px; }
.efa-podium-step .rank { padding: 8px 0 10px; width: 100%; text-align: center; border-radius: 12px 12px 0 0; font-size: 1.4rem; }
.efa-podium-1 { height: 150px; } .efa-podium-1 .rank { background: #facc15; }
.efa-podium-2 { height: 112px; animation-delay: .15s; } .efa-podium-2 .rank { background: #cbd5e1; }
.efa-podium-3 { height: 90px; animation-delay: .3s; } .efa-podium-3 .rank { background: #d97706; color: #fff; }
@keyframes efa-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.efa-bar { height: 12px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.efa-bar > i { display: block; height: 100%; border-radius: 999px; background: #2563eb; transition: width .8s ease; }

/* selo de conclusao */
@keyframes efa-stamp { 0% { transform: scale(2) rotate(-15deg); opacity: 0; } 60% { transform: scale(.95) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); } }
.efa-seal { animation: efa-stamp .7s cubic-bezier(.2,.9,.3,1.3) both; }

/* teclado de PIN */
.efa-pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #1e3a8a; display: inline-block; }
.efa-pin-dots span.is-on { background: #1e3a8a; }
.efa-key { min-height: 60px; border-radius: 16px; background: #fff; color: #1e3a8a; font-weight: 900; font-size: 1.5rem; box-shadow: 0 3px 0 #cbd5e1; }
.efa-key:active { transform: translateY(2px); box-shadow: none; }

/* cartoes da home */
.efa-card { border-radius: 22px; box-shadow: 0 8px 24px rgba(30,58,138,.15); }
.efa-lesson { min-height: 56px; }
.efa-lesson.is-done { background: #dcfce7; }
.efa-zone.is-right { background: rgba(34,197,94,.45); border-color: #22c55e; }
.efa-zone.is-wrong { background: rgba(239,68,68,.35); border-color: #ef4444; }

/* =====================================================================
   Largura das paginas: celular em coluna unica, desktop aproveita a tela
   ===================================================================== */
.efa-page { max-width: 28rem; margin-left: auto; margin-right: auto; }
.efa-page-game { max-width: 28rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
  .efa-page { max-width: 72rem; }
  .efa-page-game { max-width: 48rem; }
  .efa-opt { min-height: 150px; font-size: 1.45rem; }
  .efa-opt-tall { min-height: 190px; font-size: 1.8rem; }
  .efa-prompt-en { font-size: 2.4rem !important; line-height: 1.25; }
  .efa-zone { min-height: 150px; font-size: 1.1rem; }
  .efa-chip { font-size: 1.2rem; min-height: 54px; }
  .efa-spell-input { font-size: 2.4rem; min-height: 80px; }
  .efa-bubble { font-size: 1.2rem; }
  .efa-timer { width: 88px; height: 88px; }
  .efa-timer .num { font-size: 1.7rem; }
}
@media (min-width: 1024px) {
  .efa-page-game { max-width: 56rem; }
}
@media (min-width: 1280px) {
  .efa-page { max-width: 88rem; }
  .efa-page-game { max-width: 64rem; }
}

/* duelo */
.efa-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.efa-duel-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.efa-duel-bar > i { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.efa-duel-me > i { background: #facc15; }
.efa-duel-bot > i { background: #67e8f9; }
@keyframes efa-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.efa-pop { animation: efa-pop .4s ease both; }

/* =====================================================================
   Cena das telas de jogo: particulas, trilha de etapas, palco dos
   mascotes e layout de duas colunas no desktop
   ===================================================================== */
.efa-scene { position: relative; isolation: isolate; overflow-x: hidden; }
.efa-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.efa-particles span { position: absolute; top: -6vh; font-size: 1.2rem; opacity: .7; animation: efa-snow linear infinite; filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); }
@keyframes efa-snow {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(55vh) translateX(30px) rotate(180deg); }
  100% { transform: translateY(110vh) translateX(-20px) rotate(360deg); }
}
.efa-particles.is-fireflies span { animation: efa-firefly ease-in-out infinite; top: auto; bottom: -5vh; }
@keyframes efa-firefly {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: .9; }
  50%  { transform: translateY(-55vh) translateX(25px) scale(1); opacity: .5; }
  80%  { opacity: .9; }
  100% { transform: translateY(-110vh) translateX(-25px) scale(.6); opacity: 0; }
}
.efa-scene header, .efa-scene main { position: relative; z-index: 1; }

/* trilha de etapas no cabecalho */
.efa-trail { display: flex; gap: 6px; align-items: center; justify-content: center; }
.efa-trail .chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px;
  background: rgba(255,255,255,.15); font-size: .8rem; font-weight: 800; opacity: .55; transition: all .3s;
}
.efa-trail .chip .lbl { display: none; }
.efa-trail .chip.is-done { opacity: .9; background: rgba(34,197,94,.4); }
.efa-trail .chip.is-now { opacity: 1; background: #facc15; color: #1e3a8a; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(250,204,21,.3); }
@media (min-width: 768px) { .efa-trail .chip { font-size: .95rem; padding: 6px 14px; } .efa-trail .chip .lbl { display: inline; } }

/* main ocupa a altura da tela e centraliza verticalmente no desktop */
.efa-fill { min-height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; }
.efa-fill > section { width: 100%; }

/* duas colunas: palco dos mascotes | conteudo */
.efa-two-col { display: grid; gap: 20px; align-items: center; }
@media (min-width: 768px) { .efa-two-col { grid-template-columns: 2fr 3fr; gap: 40px; } }
.efa-stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; }
.efa-stage-one { flex-direction: column; align-items: center; }
.efa-stage-bubble { width: 100%; max-width: 24rem; }
@media (min-width: 768px) { .efa-stage .efa-char { width: 220px !important; height: 220px !important; } .efa-stage-one .efa-char { width: 260px !important; height: 260px !important; } }
@keyframes efa-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.efa-float { animation: efa-floaty 3s ease-in-out infinite; display: inline-block; }

/* lista de etapas da intro */
.efa-steps { display: grid; gap: 10px; }
.efa-steps li {
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.2);
  border-radius: 18px; padding: 10px 14px; font-size: .95rem; animation: efa-screen-in .4s ease both;
}
.efa-steps li:nth-child(2) { animation-delay: .08s; } .efa-steps li:nth-child(3) { animation-delay: .16s; } .efa-steps li:nth-child(4) { animation-delay: .24s; }
.efa-step-icon { font-size: 1.8rem; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; }
@media (min-width: 768px) { .efa-steps li { font-size: 1.15rem; padding: 14px 18px; } .efa-step-icon { font-size: 2.2rem; width: 60px; height: 60px; } }

.efa-confirm-xl { font-size: 1.3rem; min-height: 64px; }
@media (min-width: 768px) { .efa-confirm-xl { font-size: 1.6rem; min-height: 76px; } }

/* balao grande da explicacao */
.efa-bubble-xl .efa-bubble { font-size: 1.15rem; padding: 16px 20px 18px; }
@media (min-width: 768px) { .efa-bubble-xl .efa-bubble { font-size: 1.6rem; line-height: 1.5; padding: 24px 28px; border-width: 4px; } }
.efa-bubble-xl .efa-bubble::after { display: none; }

/* cartao da palavra (Nina) */
.efa-wordcard { background: #fff; color: #1e3a8a; border-radius: 28px; padding: 22px; text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.efa-wordcard-icon { height: 120px; display: flex; align-items: center; justify-content: center; }
.efa-wordcard-word { font-size: 2.6rem; font-weight: 900; letter-spacing: -.02em; }
.efa-wordcard-pt { font-size: 1.2rem; color: #475569; }
@media (min-width: 768px) {
  .efa-wordcard { padding: 36px; }
  .efa-wordcard-icon { height: 180px; } .efa-wordcard-icon .efa-icon { font-size: 9rem !important; } .efa-wordcard-icon .efa-icon:has(svg) { width: 160px !important; height: 160px !important; }
  .efa-wordcard-word { font-size: 4.2rem; } .efa-wordcard-pt { font-size: 1.6rem; }
}
.efa-bubble-lg .efa-bubble { font-size: 1.1rem; }
@media (min-width: 768px) { .efa-bubble-lg .efa-bubble { font-size: 1.4rem; line-height: 1.5; padding: 20px 24px; } .efa-podium { height: 240px; } .efa-podium-step { width: 110px; } .efa-podium-1 { height: 190px; } .efa-podium-2 { height: 140px; } .efa-podium-3 { height: 110px; } .efa-podium-step .who { font-size: 2.8rem; } }