:root{--fondo:#fffdf7;--tarjeta:#fff;--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}html,body{background:var(--fondo);color:var(--tinta);font-family:var(--font-body), -apple-system, "Segoe UI", sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-user-select:none;user-select:none;margin:0;padding:0}h1,h2,.boton,.leccion-boton .titulo{font-family:var(--font-display), var(--font-body), sans-serif}main{max-width:560px;min-height:100dvh;margin:0 auto;padding:16px 16px 40px}.hanzi{font-family:var(--font-hanzi), "PingFang TC", "Heiti TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif}.cabecera{justify-content:space-between;align-items:center;gap:12px;padding:8px 0 20px;display:flex}.cabecera h1{margin:0;font-size:24px;font-weight:700}.cabecera .vuelve{background:var(--tarjeta);border:2px solid var(--linea);width:56px;height:56px;box-shadow:var(--sombra);color:var(--tinta);border-radius:18px;flex-shrink:0;place-items:center;font-size:26px;text-decoration:none;display:grid}.cabecera .vuelve:active{box-shadow:none;transform:translateY(4px)}.enlace-guia{color:var(--tinta-suave);background:var(--crema);border:2px solid var(--linea);border-radius:999px;padding:10px 14px;font-size:14px;font-weight:700;text-decoration:none}.marca{align-items:center;gap:8px;display:inline-flex}.marca img{vertical-align:middle;width:38px;height:38px}.saludo{text-align:center;margin:4px 0 24px}.saludo .grande{margin:0;font-size:56px;line-height:1}.saludo .mandy{width:112px;height:112px;margin:0 auto;animation:3.2s ease-in-out infinite flota;display:block}.saludo h1{margin:10px 0 4px;font-size:30px}.saludo p{color:var(--tinta-suave);margin:0;font-weight:700}@keyframes flota{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-8px)rotate(3deg)}}.lista-lecciones{gap:14px;display:grid}.leccion-boton{border-radius:var(--radio);color:var(--tinta);text-align:left;width:100%;min-height:104px;font:inherit;cursor:pointer;border:2px solid #1822380f;align-items:center;gap:18px;padding:18px 20px;text-decoration:none;display:flex;box-shadow:0 6px #1822381f}.leccion-boton:active{transform:translateY(5px);box-shadow:0 1px #1822381f}.leccion-boton .emoji{background:#ffffff8c;border-radius:22px;flex-shrink:0;place-items:center;width:72px;height:72px;font-size:56px;line-height:1;display:grid}.leccion-boton .titulo{margin:0;font-size:24px;font-weight:700}.leccion-boton .sub{color:var(--tinta-suave);margin:4px 0 0;font-size:14px;font-weight:700}.leccion-boton .hecho{filter:drop-shadow(0 2px #00000014);margin-left:auto;font-size:30px}.pasos{justify-content:center;gap:8px;margin-bottom:18px;display:flex}.pasos span{background:var(--linea);border-radius:50%;width:14px;height:14px}.pasos span.activo{background:var(--acento);transform:scale(1.15)}.pasos span.listo{background:var(--ok)}.tarjeta{background:var(--tarjeta);border:2px solid var(--linea);box-shadow:0 8px 0 var(--linea);text-align:center;border-radius:32px;padding:28px 20px 24px}.tarjeta .imagen{margin:0;font-size:140px;line-height:1}.tarjeta .hanzi{color:var(--tinta);margin:16px 0 4px;font-size:68px;font-weight:700}.tarjeta .pinyin{margin:0;font-size:28px;font-weight:800}.tarjeta .es{color:var(--tinta-suave);margin:8px 0 0;font-size:20px;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{background:var(--acento);color:#fff;width:112px;height:112px;box-shadow:0 8px 0 var(--acento-oscuro);cursor:pointer;border:0;border-radius:36px;place-items:center;margin:24px auto 0;font-size:54px;display:grid}.boton-oir:active{box-shadow:0 1px 0 var(--acento-oscuro);transform:translateY(7px)}.boton-oir.sonando{animation:.6s ease-in-out infinite alternate latido}@keyframes latido{0%{transform:scale(1)}to{transform:scale(1.08)}}.navegacion{gap:12px;margin-top:20px;display:flex}.boton{border:2px solid var(--linea);min-height:72px;font:inherit;font-family:var(--font-display);cursor:pointer;color:var(--tinta);background:var(--tarjeta);box-shadow:0 6px 0 var(--linea);border-radius:24px;flex:1;justify-content:center;align-items:center;gap:10px;font-size:22px;font-weight:700;text-decoration:none;display:flex}.boton:active{box-shadow:0 1px 0 var(--linea);transform:translateY(5px)}.boton.primario{background:var(--acento);border-color:var(--acento);color:#fff;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;flex-direction:column;align-items:center;margin:0 0 20px;display:flex}.pregunta .escena{justify-content:center;align-items:flex-end;gap:6px;display:flex}.pregunta .mandy{width:88px;height:88px;animation:3.2s ease-in-out infinite flota}.pregunta .boton-oir{width:128px;height:128px;margin-top:8px;font-size:64px}.pregunta p{color:var(--tinta-suave);margin:12px 0 0;font-size:18px;font-weight:700}.opciones{grid-template-columns:1fr 1fr;gap:14px;display:grid}.opciones.tres{grid-template-columns:1fr 1fr}.opciones.tres .opcion:nth-child(3){grid-column:1/-1}.opcion{border-radius:var(--radio);border:3px solid var(--linea);background:var(--tarjeta);min-height:150px;box-shadow:0 7px 0 var(--linea);cursor:pointer;place-items:center;font-size:84px;line-height:1;transition:transform .1s;display:grid}.opcion:active{box-shadow:0 2px 0 var(--linea);transform:translateY(5px)}.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:.4s temblor}.opcion.apagada{opacity:.35;pointer-events:none;box-shadow:none;transform:translateY(5px)scale(.96)}@keyframes temblor{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.indicacion{text-align:center;flex-direction:column;align-items:center;gap:2px;min-height:64px;margin:18px 0 0;animation:.35s ease-out aparece;display:flex}.indicacion.vacia{animation:none}.indicacion .hanzi{font-size:32px;font-weight:700;line-height:1.2}.indicacion .detalle{color:var(--tinta-suave);font-size:15px;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{color:var(--tinta-suave);margin:10px 0 0;font-size:15px;font-weight:700}.frase-final{margin:8px 0 12px;font-size:26px}.frase-final small{color:var(--tinta-suave);font-size:15px;font-weight:600}.confeti{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confeti span{opacity:0;animation:cae var(--dur,1.6s) cubic-bezier(.25, .8, .5, 1) var(--retraso,0s) forwards;font-size:34px;line-height:1;position:absolute;top:-8vh}@keyframes cae{0%{opacity:0;transform:translateY(0)rotate(0)scale(.6)}10%{opacity:1}to{transform:translateY(115vh) rotate(var(--giro,360deg)) scale(1.1);opacity:.9}}.opcion.acierto{animation:.6s ease-out salto}@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:.4s ease-out aparece}.celebracion{text-align:center;padding-top:16px}.celebracion .escena{margin:0 auto;animation:.6s ease-out aparece;display:inline-block;position:relative}.celebracion .mandy{width:150px;height:150px;animation:2.6s ease-in-out infinite flota;display:block}.celebracion .estrella{font-size:34px;animation:1.4s ease-in-out infinite alternate brilla;position:absolute}.celebracion .estrella.a{top:6px;left:-34px}.celebracion .estrella.b{animation-delay:.4s;top:18px;right:-36px}.celebracion .estrella.c{font-size:26px;animation-delay:.8s;bottom:-14px;left:8px}@keyframes brilla{0%{opacity:.7;transform:scale(.85)rotate(-10deg)}to{opacity:1;transform:scale(1.15)rotate(10deg)}}.celebracion h2{margin:14px 0 8px;font-size:34px}.celebracion p{color:var(--tinta-suave);margin:0 0 28px;font-size:18px;font-weight:700}@keyframes aparece{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}.formulario{gap:14px;margin-top:24px;display:grid}.formulario input{font:inherit;border:2px solid var(--linea);text-align:center;background:#fff;border-radius:20px;width:100%;padding:18px;font-size:22px}.formulario input:focus{border-color:var(--acento);outline:none}.formulario .error{color:#b3261e;text-align:center;min-height:24px;margin:0;font-weight:700}.guia{-webkit-user-select:text;user-select:text;line-height:1.55}.guia h2{margin:28px 0 8px;font-size:20px}.guia p,.guia li{font-size:16px;font-weight:500}.guia code{background:var(--crema);border-radius:6px;padding:2px 6px;font-size:14px}.guia pre{background:var(--crema);border-radius:12px;padding:12px;font-size:13px;overflow-x:auto}.aviso{background:var(--mal-fondo);border-radius:16px;padding:12px 16px}.lista-revision{gap:8px;margin:0;padding:0;list-style:none;display:grid}.lista-revision li{background:var(--tarjeta);border:2px solid var(--linea);border-radius:16px;align-items:center;gap:12px;padding:8px 10px;display:flex}.lista-revision li.mal{border-color:var(--mal);background:var(--mal-fondo)}.lista-revision .texto{flex-direction:column;flex:1;line-height:1.25;display:flex}.lista-revision .texto .hanzi{font-size:22px;font-weight:600}.lista-revision .texto small{color:var(--tinta-suave);font-size:13px}.mini-oir,.mini-marca{cursor:pointer;border:0;border-radius:14px;flex-shrink:0;place-items:center;width:48px;height:48px;font-size:22px;display:grid}.mini-oir{background:var(--acento);color:#fff;box-shadow:0 3px 0 var(--acento-oscuro)}.mini-marca{background:var(--crema);color:var(--tinta-suave)}.mini-marca.activa{background:var(--mal);color:#fff}@media (prefers-reduced-motion:reduce){.saludo .mandy,.pregunta .mandy,.celebracion .mandy,.celebracion .estrella,.boton-oir.sonando{animation:none}}