:root {
  --fondo: #fbf8f2;
  --papel: #ffffff;
  --tinta: #1d1b18;
  --tinta-suave: #5c564d;
  --linea: #e6dfd3;
  --acento: #b5452b;
  --acento-tinta: #ffffff;
  --resalte: #fff1c2;
  --t1: #c62828;
  --t2: #2e7d32;
  --t3: #1f5fbf;
  --t4: #7b2fb5;
  --t5: #757575;
  --hanzi: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tam: 1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #171614; --papel: #211f1c; --tinta: #f1ece4; --tinta-suave: #b4ab9e; --linea: #3a3631;
    --acento: #e0795d; --acento-tinta: #1a1410; --resalte: #4a3e1c;
    --t1: #ff7a70; --t2: #6fcf73; --t3: #7fb0ff; --t4: #cf96ff; --t5: #a8a29a;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); }
body { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
main { max-width: 720px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }

/* ---------- biblioteca */
.portada h1 { font-size: 1.5rem; margin: 24px 0 4px; }
.portada p.sub { color: var(--tinta-suave); margin: 0 0 20px; }
.tarjeta { display: block; width: 100%; text-align: left; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 14px; padding: 16px; margin-bottom: 12px; cursor: pointer; }
.tarjeta .zh { font-family: var(--hanzi); font-size: 1.6rem; }
.tarjeta .es { font-size: 1.05rem; margin-top: 2px; }
.tarjeta .meta { color: var(--tinta-suave); font-size: .875rem; margin-top: 8px; }
.tarjeta-envoltura { margin-bottom: 12px; }
.tarjeta-envoltura .tarjeta { margin-bottom: 0; }
.pendiente { display: block; width: 100%; text-align: left; border: 0; background: var(--resalte); border-radius: 0 0 14px 14px;
  margin-top: -8px; padding: 14px 16px 10px; font-weight: 600; cursor: pointer; }

/* ---------- lector: cabecera (no pegajosa: el texto manda; los controles de audio viven abajo) */
.arriba { padding: 8px 0 10px; border-bottom: 1px solid var(--linea); }
.fila-titulo { display: flex; align-items: center; gap: 4px; }
.arriba .volver { border: 0; background: none; font-size: 1.25rem; min-width: 44px; min-height: 44px; cursor: pointer; }
.arriba .titulo { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.interruptores { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 8px 12px; min-height: 40px;
  font-size: .875rem; white-space: nowrap; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.ajustes .chip { font-size: .8rem; padding: 6px 10px; min-height: 36px; }
.ajustes .chip[aria-pressed="true"] { background: var(--resalte); color: var(--tinta); border-color: var(--tinta-suave); }

/* ---------- antes de leer */
.antes { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; margin: 16px 0; }
.antes h2 { font-size: .95rem; margin: 0 0 4px; font-weight: 600; }
.antes .rotulo { font-size: .8rem; color: var(--tinta-suave); margin: 8px 0 6px; }
.subrayado-muestra { box-shadow: inset 0 -2px 0 var(--acento); }
.fichas-antes { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-antes { border: 1px solid var(--linea); border-radius: 10px; padding: 6px 10px; background: var(--fondo); cursor: pointer; }
.ficha-antes .h { font-family: var(--hanzi); font-size: 1.3rem; }
.ficha-antes .p { font-size: .8rem; }
.ficha-antes .s { font-size: .8rem; color: var(--tinta-suave); }

/* ---------- frases */
.frase { padding: 14px 10px; margin: 0 -10px; border-radius: 12px; cursor: pointer; }
.frase.activa { background: var(--resalte); }
.frase .num { font-size: .75rem; color: var(--tinta-suave); }
.zh { font-family: var(--hanzi); font-size: calc(1.75rem * var(--tam)); line-height: 2.1; }
.palabra { display: inline-block; border-radius: 6px; padding: 0 1px; }
.palabra.nueva { box-shadow: inset 0 -3px 0 var(--acento); }
.palabra.personaje { box-shadow: inset 0 -3px 0 var(--linea); }
ruby { ruby-position: over; }
rt { font-family: var(--texto); font-size: calc(.8rem * var(--tam)); color: var(--tinta-suave); letter-spacing: 0; }
.sinpy rt { visibility: hidden; }
/* el color de tono va solo en el pinyin, junto a la marca; el carácter queda en tinta */
.tonos .c1 rt, .p .c1 { color: var(--t1); }
.tonos .c2 rt, .p .c2 { color: var(--t2); }
.tonos .c3 rt, .p .c3 { color: var(--t3); }
.tonos .c4 rt, .p .c4 { color: var(--t4); }
.tonos .c5 rt, .p .c5 { color: var(--t5); }
.grupo { display: inline-block; white-space: nowrap; }
.punt { display: inline-block; }
.car.sonando { text-decoration: underline 3px var(--acento); text-underline-offset: 6px; }
.es-frase { color: var(--tinta-suave); font-size: 1rem; margin-top: 2px; }
.oculta-es .es-frase { display: none; }

/* ---------- final */
.final { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin: 24px 0; }
.final h2 { margin: 0 0 6px; font-size: 1rem; }
.final p { margin: 4px 0; color: var(--tinta-suave); }
.final .para-papa { color: var(--tinta); font-size: 1.05rem; line-height: 1.45; margin-bottom: 10px; }
.boton { border: 0; background: var(--acento); color: var(--acento-tinta); border-radius: 12px; padding: 12px 16px;
  font-weight: 600; cursor: pointer; margin-top: 10px; }
.boton.sec { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); }

/* ---------- barra inferior (zona del pulgar) */
.abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--papel); border-top: 1px solid var(--linea);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 8px; }
.abajo button { min-width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--linea); background: var(--fondo);
  font-size: 1.15rem; cursor: pointer; }
.abajo .principal { background: var(--acento); color: var(--acento-tinta); border: 0; min-width: 76px; font-size: 1.4rem; }
.abajo .vel { font-size: .8rem; min-width: 64px; }
.abajo button[aria-pressed="true"] { outline: 2px solid var(--acento); }

/* ---------- hoja de palabra */
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--papel); border-top: 1px solid var(--linea);
  border-radius: 18px 18px 0 0; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
.hoja .h { font-family: var(--hanzi); font-size: 3rem; line-height: 1.2; }
.hoja .p { font-size: 1.3rem; margin-top: 4px; }
.hoja .s { font-size: 1.1rem; margin-top: 6px; }
.hoja .m { color: var(--tinta-suave); font-size: .875rem; margin-top: 8px; }
.hoja .acciones { display: flex; gap: 8px; margin-top: 12px; }
.hoja .cerrar { position: absolute; right: 12px; top: 10px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; padding: 6px; }

/* ---------- repaso: todo junto en la mitad de abajo (pulgar), sin huecos */
.repaso { padding-top: 16px; min-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.repaso-abajo { display: flex; flex-direction: column; padding-bottom: 12px; }
.repaso .pregunta { font-size: 1.05rem; margin: 16px 0 8px; }
.repaso .h-repaso { font-family: var(--hanzi); font-size: 3.2rem; text-align: center; margin: 4px 0 8px; }
.repaso-botones { display: flex; gap: 8px; margin: 0 0 12px; }
.repaso-botones .boton { margin: 0; }
.opciones { display: grid; gap: 10px; }
.opciones button { font-family: var(--hanzi); font-size: 1.8rem; padding: 12px; border-radius: 14px; border: 1px solid var(--linea);
  background: var(--papel); color: var(--tinta); cursor: pointer; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.opciones.por-sentido button { font-family: var(--texto); font-size: 1.1rem; }
.opciones .pista-py { display: none; font-family: var(--texto); font-size: .95rem; color: var(--tinta-suave); }
.opciones.con-pista .pista-py { display: block; }
.opciones .revela { display: none; font-family: var(--texto); font-size: .9rem; color: var(--tinta-suave); margin-top: 4px; }
.opciones.respondida .revela { display: block; }
.opciones.respondida .pista-py { display: none; }
.opciones button.bien { border: 2px solid var(--t2); background: color-mix(in srgb, var(--t2) 14%, var(--papel)); }
.opciones button.mal { border: 2px solid var(--t1); }
.repaso .siguiente { align-self: stretch; margin: 12px 0 0; min-height: 56px; }

/* ---------- leerle a mi hijo: letra grande, el español como puente para platicar */
.hijo .zh { font-size: calc(2.3rem * var(--tam)); }
.hijo .es-frase { font-size: 1.1rem; font-style: italic; border-left: 3px solid var(--linea); padding-left: 10px; margin-top: 6px; }
.hijo .palabra.nueva, .hijo .palabra.personaje { box-shadow: none; }
.repaso .volver { align-self: flex-start; }

/* ---------- barra de audio con rótulos */
.abajo button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 60px; height: 58px; padding: 4px 6px; color: var(--tinta); }
.abajo .ico { font-size: 1.05rem; line-height: 1; }
.abajo .rot { font-size: .72rem; line-height: 1; }
.abajo .principal { min-width: 76px; }
.abajo .principal .ico { font-size: 1.3rem; }
.abajo button[aria-pressed="true"] { outline: 0; background: var(--resalte); border-color: var(--tinta-suave); }

/* ---------- franja del pinyin adaptativo */
.franja { background: var(--papel); border: 1px dashed var(--tinta-suave); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: .9rem; color: var(--tinta-suave); }
.franja b { color: var(--tinta); }
.enlace { display: block; border: 0; background: none; color: var(--acento); padding: 8px 0 0; font-weight: 600; cursor: pointer; text-decoration: underline; }
.hoja .nota-sonido { margin-top: 8px; font-size: .9rem; background: var(--resalte); border-radius: 8px; padding: 6px 8px; }

/* ---------- libro para el hijo */
.libro { min-height: calc(100vh - 16px); display: flex; flex-direction: column; padding-top: 12px; }
.libro-arriba { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.libro .pagina { margin-left: auto; color: var(--tinta-suave); font-size: .9rem; }
.escena { font-size: clamp(4.5rem, 24vw, 9rem); text-align: center; line-height: 1.15; margin: 4vh 0 2vh; letter-spacing: .05em; }
.libro-texto .frase { margin: 0; cursor: pointer; }
.libro-texto .zh { font-size: calc(2.3rem * var(--tam)); text-align: center; }
.libro-texto rt { font-size: 1rem; }
.libro-texto.sin-rt rt { visibility: hidden; }
.libro-texto .es-frase { font-size: 1.2rem; text-align: center; font-style: italic; margin-top: 10px; }
.libro-texto .palabra.nueva, .libro-texto .palabra.personaje { box-shadow: none; }
.libro-es { text-align: center; font-size: 1.2rem; }
.libro-pasos { margin-top: auto; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); }
.libro-pasos .boton { min-height: 64px; font-size: 1.15rem; margin: 0; }
.boton:disabled { opacity: .4; }
.libro-texto .frase.activa { background: none; }

/* ---------- r3: plegables, libro nocturno, repaso compacto */
details.antes { padding: 0; }
details.antes > summary, details.franja > summary { cursor: pointer; padding: 12px 14px; list-style: none; min-height: 44px; }
details.antes > summary::-webkit-details-marker, details.franja > summary::-webkit-details-marker { display: none; }
details.antes > summary::after, details.franja > summary::after { content: " ▾"; color: var(--tinta-suave); }
details[open].antes > summary::after, details[open].franja > summary::after { content: " ▴"; }
details.antes > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.antes[open] { padding-bottom: 12px; }
details.franja { padding: 0; }
details.franja > summary { padding: 8px 12px; }
details.franja > :not(summary) { margin: 0 12px 10px; }
.oir-grande { font-size: 1.15rem; min-height: 56px; padding: 12px 22px; }
.repaso .oir-grande { align-self: center; }
.repaso .h-repaso { margin: 24px 0 16px; }
.revela-leer { text-align: center; font-size: 1.3rem; margin: 12px 0; }
.autoeval .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.autoeval .boton { margin: 0; min-height: 56px; }
button.escena { display: block; width: 100%; border: 0; background: none; cursor: pointer; color: inherit; font-family: inherit; }
.libro-oir { align-self: center; margin-top: 18px; min-height: 56px; padding: 12px 22px; font-size: 1.05rem; }
body.noche { --fondo: #12110f; --papel: #1c1a17; --tinta: #e9e2d6; --tinta-suave: #a39a8c; --linea: #34302a; --resalte: #3a321c;
  --acento: #c96a50; --acento-tinta: #14100d; background: var(--fondo); color: var(--tinta); }

/* ---------- r4: pinyin legible, ajustes plegados, libro sin cursiva */
rt { font-size: calc(.9rem * var(--tam)); }
.opciones .pista-py { display: block; }
.opciones.respondida .pista-py { display: none; }
.chip-ajustes { margin-left: auto; }
.interruptores.ajustes[hidden] { display: none; }
.libro-texto rt { font-size: 1.05rem; color: var(--tinta); opacity: .85; }
.libro-texto .es-frase { font-style: normal; font-size: 1.1rem; color: var(--tinta); opacity: .8; }
.final .boton.sec { display: block; margin-top: 8px; }

/* ---------- r5 */
.opciones .pista-py { display: none; }
.opciones.con-pista .pista-py { display: block; }
.opciones.respondida .pista-py { display: none; }
.segmentos { display: flex; align-items: center; gap: 0; margin-top: 8px; }
.seg-rotulo { font-size: .8rem; color: var(--tinta-suave); margin-right: 8px; }
.seg { border: 1px solid var(--linea); background: var(--papel); padding: 7px 12px; min-height: 38px; font-size: .85rem; cursor: pointer; margin-left: -1px; }
.seg:first-of-type { border-radius: 999px 0 0 999px; }
.seg:last-of-type { border-radius: 0 999px 999px 0; }
.seg[aria-checked="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); position: relative; }
.franja .que { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--tinta-suave); text-align: center; line-height: 18px; font-size: .75rem; }
.palabra.reciclada { box-shadow: inset 0 -2px 0 var(--tinta-suave); }
.ficha-antes .s { max-width: 11em; white-space: normal; line-height: 1.25; }
.libro-ayuda { text-align: center; color: var(--tinta-suave); font-size: .85rem; min-height: 1.2em; margin-top: 8px; }

/* ---------- fase 2: láminas ilustradas, portada del libro, personajes */
.lamina { margin: 10px 0 6px; border-radius: 14px; overflow: hidden; background: #f3ead8; aspect-ratio: 3 / 4;
  max-height: 46vh; align-self: center; width: min(100%, calc(46vh * 3 / 4)); cursor: pointer; }
.lamina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lamina.sin-img { display: flex; align-items: center; justify-content: center; font-size: clamp(3.5rem, 18vw, 7rem); letter-spacing: .05em; }
body.noche .lamina { background: #2a261f; }
body.noche .lamina img { filter: brightness(.92); }
.libro-texto .zh { font-size: calc(1.8rem * var(--tam)); line-height: 1.85; }
.libro-pasos { grid-template-columns: 64px 1fr 1.4fr; padding-top: 10px; }
.libro-pasos .libro-oir { margin: 0; align-self: stretch; }
.libro-titulo { font-family: var(--hanzi); font-size: 2.6rem; text-align: center; margin: 12px 0 0; font-weight: 600; }
.libro-titulo + .libro-es { margin-top: 4px; }
.libro .libro-pasos:has(> :only-child) { grid-template-columns: 1fr; }
.fin-cuento { font-family: var(--hanzi); font-size: 6rem; text-align: center; margin: 6vh 0 0; }
.platicar { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 16px; margin: 12px 0; }
.platicar h2 { font-size: 1rem; margin: 0 0 6px; }
.platicar ol { margin: 0; padding-left: 20px; line-height: 1.5; }
.palabra.sonido rt { font-style: italic; }
.tarjeta.con-img { display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; align-items: center; }
.tarjeta .miniatura { grid-row: span 3; width: 76px; height: 101px; object-fit: cover; border-radius: 10px; background: #f3ead8; }
.tarjeta .miniatura.sin-img { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.tarjeta:not(.con-img) .miniatura { display: none; }
.elenco-entrar { display: block; margin: 0 0 16px; }
.elenco h1 { margin: 12px 0 4px; }
.elenco .sub { color: var(--tinta-suave); margin: 0 0 14px; }
.elenco-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding-bottom: 24px; }
.personaje-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--linea); border-radius: 14px;
  background: var(--papel); padding: 10px; cursor: pointer; color: var(--tinta); }
.personaje-tarjeta img, .personaje-tarjeta .sin-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #f6efe1; }
.personaje-tarjeta .sin-img { display: flex; align-items: center; justify-content: center; font-family: var(--hanzi); font-size: 2.4rem; }
.personaje-tarjeta .h { font-family: var(--hanzi); font-size: 1.5rem; }
.personaje-tarjeta .s { font-size: .9rem; color: var(--tinta-suave); }
.personaje-tarjeta.activa { outline: 3px solid var(--acento); }
.libro-pasos.dos { grid-template-columns: 1fr 2fr; }

/* ---------- r7: la lámina llena el alto libre; palabras que no se parten; repaso en la zona del pulgar */
.libro { height: 100dvh; min-height: 0; box-sizing: border-box; padding-bottom: 0; }
.libro .lamina { flex: 1 1 0; min-height: 160px; max-height: none; width: 100%; aspect-ratio: auto; background: none;
  display: flex; justify-content: center; align-items: center; margin: 8px 0 4px; }
.libro .lamina img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 14px; }
.libro .lamina.sin-img { background: #f3ead8; border-radius: 14px; }
body.noche .libro .lamina.sin-img { background: #2a261f; }
body.noche .lamina img { filter: brightness(.8) sepia(.12); }
.libro .lamina-fin { flex: 0 1 auto; max-height: 30vh; }
.libro .fin-cuento { font-size: 3.5rem; margin: 4px 0 0; }
.libro-pasos { padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); }
.libro-ayuda { margin: 0 0 6px; }
.palabra { white-space: nowrap; display: inline-block; margin: 0 .08em; }
.libro-texto .zh { line-height: 1.7; }
.libro-texto.oculta-es .es-frase { display: none; }
.chip.confirmar { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); }
.repaso { min-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.repaso-abajo { margin-top: auto; padding-bottom: 12px; }
body.noche .libro .lamina:not(.sin-img), .libro .lamina:not(.sin-img) { background: none; }

/* ---------- r8: panel del libro, avance, leyenda, repaso con lámina */
.panel-libro { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.interruptor { border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); border-radius: 12px; padding: 10px 12px; min-height: 44px; font-size: .9rem; cursor: pointer; }
.avance { text-align: center; color: var(--tinta-suave); font-size: 1rem; line-height: 1.45; margin: 6px 8px 0; }
.leyenda { font-size: .8rem; color: var(--tinta-suave); margin: 4px 0 6px; }
.leyenda .m-nueva { box-shadow: inset 0 -3px 0 var(--acento); }
.leyenda .m-reciclada { box-shadow: inset 0 -2px 0 var(--tinta-suave); }
.leyenda .m-personaje { box-shadow: inset 0 -3px 0 var(--linea); }
.repaso-arriba { display: flex; align-items: center; justify-content: space-between; }
.repaso-arriba .dura { color: var(--tinta-suave); font-size: .85rem; }
.contexto { display: flex; gap: 10px; align-items: center; margin: 10px 0 0; }
.contexto img, .contexto .sin-img { width: 72px; height: 96px; object-fit: cover; border-radius: 10px; flex: none; background: #f3ead8; display: flex; align-items: center; justify-content: center; }
.contexto .es { margin: 0; font-size: .9rem; color: var(--tinta-suave); line-height: 1.35; }

/* ---------- r9 */
.al-libro { display: block; width: 100%; text-align: left; border: 1px solid var(--linea); border-top: 0; background: var(--fondo);
  color: var(--tinta); padding: 12px 16px; font-size: .95rem; cursor: pointer; border-radius: 0 0 14px 14px; }
.tarjeta-envoltura .tarjeta { border-radius: 14px 14px 0 0; }
.tarjeta-envoltura .pendiente { border-radius: 0 0 14px 14px; }
.tarjeta-envoltura .al-libro:has(+ .pendiente) { border-radius: 0; }
.que-dice { align-self: center; padding: 4px 0; font-size: .95rem; }

/* ---------- r10: en el libro, «Siguiente» deja de ser el blanco más brillante (Krug r9) */
.libro-pasos .boton[data-accion="libro-sig"] { background: var(--papel); color: var(--tinta); border: 2px solid var(--acento); }
.pista-leer { text-align: center; font-size: 1.2rem; color: var(--tinta-suave); margin: 6px 0; }
.repaso .h-repaso { margin: 12px 0 8px; }

/* ---------- r11 */
.clausula { white-space: nowrap; display: inline-block; }
.personaje-tarjeta .p { font-size: .9rem; color: var(--tinta-suave); }
.libro .lamina.cerca { overflow: hidden; }
.libro .lamina.cerca img { transform: scale(1.35); transform-origin: 50% 40%; transition: transform .6s ease; }

/* ---------- r12 */
ruby.por-palabra { ruby-align: center; margin: 0 .06em; }
.buenas-noches { min-height: 90dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.buenas-noches .luna { font-size: 4rem; }
.buenas-noches .zh { font-family: var(--hanzi); font-size: 3rem; margin: 0; }
.predecir { text-align: center; color: var(--tinta-suave); font-size: .95rem; margin: 2px 0; }
.empieza { display: inline-block; background: var(--resalte); color: var(--tinta); border-radius: 999px; padding: 2px 10px; font-size: .8rem; margin-bottom: 4px; }
.tarjeta .miniatura { grid-row: span 4; } .tarjeta.con-img > :not(.miniatura) { grid-column: 2; }

/* ---------- después de r12: el pinyin por palabra como bloque sobre su palabra (no se encima ni se corre) */
ruby.por-palabra { display: inline-flex; flex-direction: column-reverse; align-items: center; vertical-align: bottom; margin: 0 .12em; line-height: 1.15; }
ruby.por-palabra > rt { display: block; text-align: center; white-space: nowrap; line-height: 1.2; margin-bottom: 1px; }
ruby.por-palabra > .base { display: block; white-space: nowrap; }
ruby.por-palabra { flex-wrap: nowrap; }
.libro-texto ruby.por-palabra > rt { font-size: .95rem; }