:root{--fondo:#FFFDF7;--tarjeta:#ffffff;--crema:#FFF6E5;--tinta:#182238;--tinta-suave:#4A5568;--acento:#ff6b00;--acento-oscuro:#c2410c;--ambar:#ffa800;--ambar-oscuro:#d98c00;--ok:#00c47e;--ok-oscuro:#0b7a4f;--ok-fondo:#E6F8F0;--mal:#ffa800;--mal-fondo:#FFF4D6;--linea:#F3E6D2;--radio:28px;--sombra:0 5px 0 #F0E2CC;--tono-1:#e5484d;--tono-2:#00a86b;--tono-3:#2f6fed;--tono-4:#8e4ec6;--tono-5:#7a8290}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{margin:0;padding:0;background:var(--fondo);color:var(--tinta);font-family:var(--font-body),-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation;user-select:none;-webkit-user-select:none}.boton,.leccion-boton .titulo,h1,h2{font-family:var(--font-display),var(--font-body),sans-serif}main{max-width:560px;margin:0 auto;padding:16px 16px 40px;min-height:100dvh}.hanzi{font-family:var(--font-hanzi),"PingFang TC","Heiti TC","Microsoft JhengHei","Noto Sans TC",sans-serif}.cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 20px}.cabecera h1{font-size:24px;margin:0;font-weight:700}.cabecera .vuelve{width:56px;height:56px;border-radius:18px;background:var(--tarjeta);border:2px solid var(--linea);box-shadow:var(--sombra);font-size:26px;display:grid;place-items:center;color:var(--tinta);text-decoration:none;flex-shrink:0}.cabecera .vuelve:active{transform:translateY(4px);box-shadow:none}.enlace-guia{font-size:14px;font-weight:700;color:var(--tinta-suave);text-decoration:none;padding:10px 14px;border-radius:999px;background:var(--crema);border:2px solid var(--linea)}.marca{display:inline-flex;align-items:center;gap:8px}.marca img{width:38px;height:38px;vertical-align:middle}.saludo{text-align:center;margin:4px 0 24px}.saludo .grande{font-size:56px;line-height:1;margin:0}.saludo .mandy{width:112px;height:112px;margin:0 auto;display:block;animation:flota 3.2s ease-in-out infinite}.saludo h1{font-size:30px;margin:10px 0 4px}.saludo p{margin:0;color:var(--tinta-suave);font-weight:700}@keyframes flota{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}.lista-lecciones{display:grid;gap:14px}.leccion-boton{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:var(--radio);text-decoration:none;color:var(--tinta);min-height:104px;width:100%;text-align:left;font:inherit;cursor:pointer;border:2px solid rgba(24,34,56,.06);box-shadow:0 6px 0 rgba(24,34,56,.12)}.leccion-boton:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(24,34,56,.12)}.leccion-boton .emoji{font-size:56px;line-height:1;width:72px;height:72px;display:grid;place-items:center;background:rgba(255,255,255,.55);border-radius:22px;flex-shrink:0}.leccion-boton .titulo{font-size:24px;font-weight:700;margin:0}.leccion-boton .sub{font-size:14px;color:var(--tinta-suave);margin:4px 0 0;font-weight:700}.leccion-boton .hecho{margin-left:auto;font-size:30px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.08))}.pasos{display:flex;gap:8px;justify-content:center;margin-bottom:18px}.pasos span{width:14px;height:14px;border-radius:50%;background:var(--linea)}.pasos span.activo{background:var(--acento);transform:scale(1.15)}.pasos span.listo{background:var(--ok)}.tarjeta{background:var(--tarjeta);border-radius:32px;border:2px solid var(--linea);box-shadow:0 8px 0 var(--linea);padding:28px 20px 24px;text-align:center}.tarjeta .imagen{font-size:140px;line-height:1;margin:0}.tarjeta .hanzi{font-size:68px;margin:16px 0 4px;font-weight:700;color:var(--tinta)}.tarjeta .pinyin{font-size:28px;font-weight:800;margin:0}.tarjeta .es{font-size:20px;color:var(--tinta-suave);margin:8px 0 0;font-weight:700}.pinyin .t1{color:var(--tono-1)}.pinyin .t2{color:var(--tono-2)}.pinyin .t3{color:var(--tono-3)}.pinyin .t4{color:var(--tono-4)}.pinyin .t5{color:var(--tono-5)}.boton-oir{margin:24px auto 0;width:112px;height:112px;border-radius:36px;background:var(--acento);color:white;border:0;font-size:54px;display:grid;place-items:center;box-shadow:0 8px 0 var(--acento-oscuro);cursor:pointer}.boton-oir:active{transform:translateY(7px);box-shadow:0 1px 0 var(--acento-oscuro)}.boton-oir.sonando{animation:latido .6s ease-in-out infinite alternate}@keyframes latido{0%{transform:scale(1)}to{transform:scale(1.08)}}.navegacion{display:flex;gap:12px;margin-top:20px}.boton{flex:1 1;min-height:72px;border-radius:24px;border:2px solid var(--linea);font:inherit;font-family:var(--font-display);font-size:22px;font-weight:700;cursor:pointer;color:var(--tinta);background:var(--tarjeta);box-shadow:0 6px 0 var(--linea);display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}.boton:active{transform:translateY(5px);box-shadow:0 1px 0 var(--linea)}.boton.primario{background:var(--acento);border-color:var(--acento);color:white;box-shadow:0 6px 0 var(--acento-oscuro)}.boton.primario:active{box-shadow:0 1px 0 var(--acento-oscuro)}.boton[disabled]{opacity:.35;pointer-events:none}.pregunta{text-align:center;margin:0 0 20px;display:flex;flex-direction:column;align-items:center}.pregunta .escena{display:flex;align-items:flex-end;justify-content:center;gap:6px}.pregunta .mandy{width:88px;height:88px;animation:flota 3.2s ease-in-out infinite}.pregunta .boton-oir{width:128px;height:128px;font-size:64px;margin-top:8px}.pregunta p{margin:12px 0 0;font-size:18px;color:var(--tinta-suave);font-weight:700}.opciones{display:grid;gap:14px}.opciones,.opciones.tres{grid-template-columns:1fr 1fr}.opciones.tres .opcion:nth-child(3){grid-column:1/-1}.opcion{min-height:150px;border-radius:var(--radio);border:3px solid var(--linea);background:var(--tarjeta);box-shadow:0 7px 0 var(--linea);font-size:84px;display:grid;place-items:center;cursor:pointer;line-height:1;transition:transform .1s}.opcion:active{transform:translateY(5px);box-shadow:0 2px 0 var(--linea)}.opcion.acierto{border-color:var(--ok);background:var(--ok-fondo);box-shadow:0 7px 0 var(--ok)}.opcion.fallo{border-color:var(--mal);background:var(--mal-fondo);animation:temblor .4s}.opcion.apagada{opacity:.35;pointer-events:none;box-shadow:none;transform:translateY(5px) scale(.96)}@keyframes temblor{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.indicacion{text-align:center;min-height:64px;margin:18px 0 0;display:flex;flex-direction:column;align-items:center;gap:2px;animation:aparece .35s ease-out}.indicacion.vacia{animation:none}.indicacion .hanzi{font-size:32px;font-weight:700;line-height:1.2}.indicacion .detalle{font-size:15px;color:var(--tinta-suave);font-weight:700}.indicacion.ok .hanzi{color:var(--ok-oscuro)}.indicacion.animo .hanzi{color:var(--acento-oscuro)}.indicacion.turno .hanzi{color:var(--acento)}.bajo-boton{margin:10px 0 0;font-size:15px;color:var(--tinta-suave);font-weight:700}.frase-final{font-size:26px;margin:8px 0 12px}.frase-final small{font-size:15px;color:var(--tinta-suave);font-weight:600}.confeti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}.confeti span{position:absolute;top:-8vh;font-size:34px;line-height:1;opacity:0;animation:cae var(--dur,1.6s) cubic-bezier(.25,.8,.5,1) var(--retraso,0s) forwards}@keyframes cae{0%{transform:translateY(0) rotate(0deg) scale(.6);opacity:0}10%{opacity:1}to{transform:translateY(115vh) rotate(var(--giro,1turn)) scale(1.1);opacity:.9}}.opcion.acierto{animation:salto .6s ease-out}@keyframes salto{0%{transform:scale(1)}35%{transform:scale(1.25) rotate(-6deg)}70%{transform:scale(1.1) rotate(4deg)}to{transform:scale(1)}}.mensaje.ok{font-size:30px;animation:aparece .4s ease-out}.celebracion{text-align:center;padding-top:16px}.celebracion .escena{position:relative;display:inline-block;margin:0 auto;animation:aparece .6s ease-out}.celebracion .mandy{width:150px;height:150px;display:block;animation:flota 2.6s ease-in-out infinite}.celebracion .estrella{position:absolute;font-size:34px;animation:brilla 1.4s ease-in-out infinite alternate}.celebracion .estrella.a{left:-34px;top:6px}.celebracion .estrella.b{right:-36px;top:18px;animation-delay:.4s}.celebracion .estrella.c{left:8px;bottom:-14px;animation-delay:.8s;font-size:26px}@keyframes brilla{0%{transform:scale(.85) rotate(-10deg);opacity:.7}to{transform:scale(1.15) rotate(10deg);opacity:1}}.celebracion h2{font-size:34px;margin:14px 0 8px}.celebracion p{color:var(--tinta-suave);font-size:18px;margin:0 0 28px;font-weight:700}@keyframes aparece{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.formulario{display:grid;gap:14px;margin-top:24px}.formulario input{font:inherit;font-size:22px;padding:18px;border-radius:20px;border:2px solid var(--linea);background:white;width:100%;text-align:center}.formulario input:focus{outline:none;border-color:var(--acento)}.formulario .error{color:#b3261e;text-align:center;margin:0;min-height:24px;font-weight:700}.guia{user-select:text;-webkit-user-select:text;line-height:1.55}.guia h2{font-size:20px;margin:28px 0 8px}.guia li,.guia p{font-size:16px;font-weight:500}.guia code{padding:2px 6px;border-radius:6px;font-size:14px}.guia code,.guia pre{background:var(--crema)}.guia pre{padding:12px;border-radius:12px;overflow-x:auto;font-size:13px}.aviso{background:var(--mal-fondo);border-radius:16px;padding:12px 16px}.lista-revision{list-style:none;padding:0;margin:0;display:grid;gap:8px}.lista-revision li{display:flex;align-items:center;gap:12px;background:var(--tarjeta);border-radius:16px;padding:8px 10px;border:2px solid var(--linea)}.lista-revision li.mal{border-color:var(--mal);background:var(--mal-fondo)}.lista-revision .texto{flex:1 1;display:flex;flex-direction:column;line-height:1.25}.lista-revision .texto .hanzi{font-size:22px;font-weight:600}.lista-revision .texto small{color:var(--tinta-suave);font-size:13px}.mini-marca,.mini-oir{width:48px;height:48px;border-radius:14px;border:0;font-size:22px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}.mini-oir{background:var(--acento);color:white;box-shadow:0 3px 0 var(--acento-oscuro)}.mini-marca{background:var(--crema);color:var(--tinta-suave)}.mini-marca.activa{background:var(--mal);color:white}@media (prefers-reduced-motion:reduce){.boton-oir.sonando,.celebracion .estrella,.celebracion .mandy,.pregunta .mandy,.saludo .mandy{animation:none}}.boton-imagen{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:14px;border:0;border-radius:24px;background:transparent;cursor:pointer;color:inherit}.boton-imagen .imagen{display:block}.icono-sonido{font-size:34px}.ayuda-adulto summary:focus-visible,.boton-imagen:focus-visible{outline:3px solid var(--acento);outline-offset:4px}.boton-imagen.sonando{background:var(--ok-fondo)}.ayuda-adulto{text-align:left;margin:16px 0;border:1px solid var(--linea);border-radius:16px;padding:14px;font-size:16px}.ayuda-adulto summary{cursor:pointer;font-weight:700}.ayuda-adulto p{line-height:1.5}.tarjeta .ayuda-adulto .hanzi{font-size:32px}.tarjeta .ayuda-adulto .pinyin{font-size:22px}.opcion:disabled{cursor:default}.opcion:disabled:not(.acierto):not(.apagada){opacity:.65}