/* Rosto da professora: bolinha com olhos, sobrancelhas e boca. A cor vem de --cor (humor);
   o estado (ouvindo/falando/pensando) muda a expressão; --nivel (0..1) abre a boca com a voz. */
.rosto { --nivel: 0; width: min(46vw, 230px); aspect-ratio: 1; position: relative; flex: none; }
@media (max-height: 700px) { .rosto { width: min(36vw, 170px); } }
.rosto .halo { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--cor), .38), transparent 66%); filter: blur(6px); animation: respira 4s ease-in-out infinite; }
.rosto .bola { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(var(--cor), .95) 38%, rgba(var(--cor), .65) 75%, rgba(10,12,30,.9)); box-shadow: 0 0 calc(30px + var(--nivel) * 50px) rgba(var(--cor), .55), inset 0 -12px 30px rgba(0,0,0,.35); transition: background .8s, box-shadow .15s; animation: flutua 6s ease-in-out infinite; }
.rosto svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rosto .cara { transition: transform .5s ease; }
.rosto .olho { fill: #fff; transition: ry .12s, rx .2s; rx: 6px; ry: 8px; }
.rosto .brilho { fill: rgba(var(--cor), 1); }
.rosto .sobr { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; transition: d .4s ease, transform .4s; }
.rosto .boca { fill: #1a1030; stroke: #fff; stroke-width: 2.6; transition: rx .08s, ry .08s; rx: calc(9px - var(--nivel) * 2px); ry: calc(1.6px + var(--nivel) * 9px); }
.rosto .sorriso { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; transition: d .4s, opacity .2s; }

/* boca: sorriso quando calada, oval que abre quando fala */
.rosto .boca { opacity: 0; }
.rosto[data-estado="falando"] .boca { opacity: 1; }
.rosto[data-estado="falando"] .sorriso { opacity: 0; }

/* piscar */
.rosto.pisca .olho { ry: 1px; }

/* estados */
.rosto[data-estado="ouvindo"] .cara { transform: translateY(-2px) scale(1.03); }
.rosto[data-estado="ouvindo"] .halo { animation-duration: 1.6s; }
.rosto[data-estado="pensando"] .cara { transform: translate(4px, -4px); }
.rosto[data-estado="pensando"] .olho { ry: 6px; }
.rosto[data-estado="conectando"] .bola { filter: saturate(.5) brightness(.85); }
.rosto[data-estado="parada"] .bola { filter: saturate(.6); }

/* humores: sobrancelhas e sorriso */
.rosto[data-humor="brava"] .sobr.e { d: path("M 30 36 L 44 41"); }
.rosto[data-humor="brava"] .sobr.d { d: path("M 70 36 L 56 41"); }
.rosto[data-humor="brava"] .sorriso { d: path("M 40 66 Q 50 63 60 66"); }
.rosto[data-humor="exigente"] .sobr.e { d: path("M 31 38 L 44 38"); }
.rosto[data-humor="exigente"] .sobr.d { d: path("M 69 38 L 56 38"); }
.rosto[data-humor="exigente"] .sorriso { d: path("M 40 65 Q 50 69 60 65"); }
.rosto[data-humor="paciente"] .sobr.e { d: path("M 31 38 Q 37 33 44 36"); }
.rosto[data-humor="paciente"] .sobr.d { d: path("M 69 38 Q 63 33 56 36"); }
.rosto[data-humor="paciente"] .sorriso { d: path("M 38 63 Q 50 74 62 63"); }
/* reação a acerto / correção (classes rápidas) */
.rosto.feliz .sorriso { d: path("M 36 62 Q 50 78 64 62"); }
.rosto.feliz .olho { ry: 4px; }
.rosto.franze .sobr.e { d: path("M 30 35 L 44 42"); }
.rosto.franze .sobr.d { d: path("M 70 35 L 56 42"); }

@keyframes respira { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }