/* Aprendi2 — lo propio de Aprendi2 sobre el diseño de Colorines (core.css, home.css y juegos.css):
   el inicio, los menús de las materias, las estrellas y las piezas nuevas del motor de los
   juegos (pantalla de juego con dibujo arriba, tarjetas de texto, Sí / No, teclado de números, medalla). */

/* ---------- Texto de index.html (buscadores y sin JavaScript): la app lo reemplaza al arrancar ---------- */
.ap-static {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  font-size: 1.05rem;
  line-height: 1.5;
}
.ap-static h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.15; }
.ap-static h2 { margin: 22px 0 6px; font-size: 1.35rem; }
.ap-static ul { padding-left: 1.3em; }
.ap-static li { margin: 4px 0; }
.ap-static strong { font-weight: 600; }

/* ---------- Inicio: cinco tarjetas (la grilla es la de home.css) ---------- */
.screen--inicio .home-card--mate { --c1: #a6e6ff; --c2: #45b6f2; }
.screen--inicio .home-card--ingles { --c1: #ffe07a; --c2: #ffb938; }
/* Estrellas ganadas en la materia, arriba a la derecha de la tarjeta. */
.home-stars,
.ap-total {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 4px 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.16);
  font-size: clamp(15px, 2.3vmin, 20px);
  font-weight: 700;
  white-space: nowrap;
}
.home-stars { position: absolute; top: 10px; right: 10px; z-index: 1; }
.home-stars .icon,
.ap-total .icon { width: 1.5em; height: 1.5em; }
/* "Para familias": recomendación del canal de YouTube (enlace grande, arriba de todo). */
.hm-yt {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 14px; padding: 12px 16px;
  border: 3px solid var(--ink); border-radius: 18px;
  background: linear-gradient(160deg, #fff4f2, #ffe0dc);
  box-shadow: 0 4px 0 rgba(43, 34, 64, 0.18);
  color: var(--ink); text-decoration: none;
}
.hm-yt:hover, .hm-yt:focus-visible { background: linear-gradient(160deg, #fff, #ffd3cd); }
.hm-yt-play {
  flex: 0 0 auto; width: 52px; height: 38px; display: grid; place-items: center;
  border: 3px solid var(--ink); border-radius: 12px; background: #ff0033; color: #fff; font-size: 20px; padding-left: 3px;
}
.hm-yt-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.hm-yt-text strong { font-size: 1.1rem; }
.hm-yt-text span { color: var(--ink-soft); }
/* "Para familias": el botón de borrar las estrellas. */
.hm-reset-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; color: var(--ink-soft); }
.hm-reset { flex: 0 0 auto; }

/* ---------- Menú de una materia: tarjetas que se deslizan ---------- */
.screen--juegos.ap-mate {
  background:
    radial-gradient(110% 70% at 50% 0%, #fffaf0 0%, rgba(255, 250, 240, 0) 60%),
    radial-gradient(90% 70% at 0% 100%, #d9f3ff 0%, rgba(217, 243, 255, 0) 70%),
    var(--bg);
}
.screen--juegos.ap-ingles {
  background:
    radial-gradient(110% 70% at 50% 0%, #fffaf0 0%, rgba(255, 250, 240, 0) 60%),
    radial-gradient(90% 70% at 100% 100%, #ece4ff 0%, rgba(236, 228, 255, 0) 70%),
    var(--bg);
}
.screen--juegos .ap-menu {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px clamp(10px, 3vmin, 28px) clamp(18px, 4vmin, 34px);
  container-type: inline-size;
}
.screen--juegos .ap-menu-head { display: flex; justify-content: center; margin: 0 0 clamp(10px, 2vmin, 18px); }
.screen--juegos .ap-menu-in {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(12px, 2.6vmin, 26px);
  max-width: 1500px;
  margin: 0 auto;
}
@container (min-width: 600px) { .screen--juegos .ap-menu-in { --cols: 3; } }
@container (min-width: 880px) { .screen--juegos .ap-menu-in { --cols: 4; } }
@container (min-width: 1240px) { .screen--juegos .ap-menu-in { --cols: 5; } }
.screen--juegos .ap-card {
  --cw: 210px;
  --card-r: 26px;
  --card-gap: 4%;
  --card-font: clamp(15px, 2.3vmin, 21px);
  aspect-ratio: 6 / 5;
  width: 100%;
  padding: 16px 10px 12px;
}
/* Inglés: los juegos agrupados por unidad del libro (js/ingles/curriculo.js). */
.screen--juegos .ap-unit { max-width: 1500px; margin: 0 auto clamp(16px, 3.4vmin, 32px); }
.screen--juegos .ap-unit-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 14px);
  margin: 0 2px clamp(8px, 1.6vmin, 14px);
}
.ap-unit-n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(34px, 5.4vmin, 46px);
  height: clamp(34px, 5.4vmin, 46px);
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #ffd23f;
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.16);
  font-size: clamp(18px, 3vmin, 26px);
  font-weight: 700;
  line-height: 1;
}
.ap-unit-t { flex: 1 1 auto; min-width: 0; }
.ap-unit-t h2 { margin: 0; font-size: clamp(19px, 3.2vmin, 28px); line-height: 1.1; }
.ap-unit-t p { margin: 2px 0 0; font-size: clamp(13px, 2vmin, 17px); color: var(--ink-soft); }
.ap-unit-stars {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 10px 2px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: clamp(13px, 2vmin, 17px);
  font-weight: 700;
  white-space: nowrap;
}
.ap-unit-stars .icon { width: 1.4em; height: 1.4em; }
/* El nombre en inglés, debajo del nombre de la tarjeta (es lo que dice la voz al tocarla). */
.ap-card-en {
  flex: 0 0 auto;
  max-width: 100%;
  margin-top: -0.1em;
  padding: 0 0.7em;
  color: #fff;
  font-size: calc(var(--card-font, 18px) * 0.78);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 0 rgba(43, 34, 64, 0.55), 0 0 6px rgba(43, 34, 64, 0.35);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Las 3 estrellas de cada juego (las ganadas, a color). */
.ap-cstars {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 1px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}
.ap-cstar .icon { display: block; width: clamp(18px, 2.6vmin, 24px); height: clamp(18px, 2.6vmin, 24px); filter: grayscale(1); opacity: 0.3; }
.ap-cstar.on .icon { filter: none; opacity: 1; }

/* ---------- Pantalla de juego ---------- */
/* Fácil | Difícil: en pantallas chicas, sólo los dibujos. */
@media (max-width: 760px) { .screen--juegos .ap-level .switch-label { display: none; } }
/* Jugando, en celulares, la burbuja Aprender | Jugar también va sin texto para que entre la fila. */
@media (max-width: 520px) { .screen--juegos .jg-opts .switch-label { display: none; } }

/* Lo de abajo cuando se juega: el dibujo de la pregunta (si hay) y las respuestas. */
.screen--juegos .ap-play {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.screen--juegos .ap-play > .jg-quiz { flex: 1 1 auto; }
.screen--juegos .ap-show {
  flex: 1 1 54%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(10px, 2.5vmin, 24px) clamp(8px, 1.6vmin, 14px);
  container-type: size;
  animation: jg-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
.screen--juegos .ap-play.has-show > .jg-quiz { flex: 1 1 46%; }
/* Un cuadro blanco con borde para lo que se muestra (la cuenta, la serie, la escena). */
.screen--juegos .ap-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2cqmin, 20px);
  max-width: 100%;
  max-height: 100%;
  padding: clamp(8px, 3cqmin, 22px) clamp(12px, 4cqmin, 30px);
  border: 4px solid var(--ink);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(43, 34, 64, 0.2);
}
/* Un dibujo solo: tan alto como entre, sin pasarse del ancho. */
.screen--juegos .ap-show > svg { width: auto; height: 100%; max-width: 100%; max-height: 100%; overflow: visible; }
.screen--juegos .ap-show > .ap-scene,
.screen--juegos .ap-show > .ap-train,
.screen--juegos .ap-show > .ap-measure,
.screen--juegos .ap-show > .ap-farm { width: 100%; height: 100%; }

/* Cantidad de respuestas: columnas y filas. */
.screen--juegos .jg-quiz.ap-n2 { --cols: 2; --rows: 1; }
.screen--juegos .jg-quiz.ap-n3 { --cols: 3; --rows: 1; }
.screen--juegos .jg-quiz.ap-n4 { --cols: 4; --rows: 1; }
.screen--juegos .jg-quiz.ap-n5 { --cols: 5; --rows: 1; }
.screen--juegos .jg-quiz.ap-n8 { --cols: 4; --rows: 2; }
.screen--juegos .jg-quiz.ap-cols { --cols: var(--ap-cols); --rows: 1; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
@container (max-aspect-ratio: 1 / 1) {
  .screen--juegos .jg-quiz.ap-n2 { --cols: 2; --rows: 1; }
  .screen--juegos .jg-quiz.ap-n3 { --cols: 3; --rows: 1; }
  .screen--juegos .jg-quiz.ap-n4 { --cols: 2; --rows: 2; }
  .screen--juegos .jg-quiz.ap-n5 { --cols: 3; --rows: 2; }
  .screen--juegos .jg-quiz.ap-n8 { --cols: 2; --rows: 4; }
  .screen--juegos .has-show .jg-quiz.ap-n6 { --cols: 3; --rows: 2; }
  .screen--juegos .has-show .jg-quiz.ap-n8 { --cols: 4; --rows: 2; }
  .screen--juegos .jg-quiz.ap-cols { --cols: min(var(--ap-cols), 3); }
}

/* Tarjetas de texto o número (AP.juegos.textCard): la letra se achica según el largo. */
.screen--juegos .ap-txt { position: relative; }
.screen--juegos .ap-txt .jg-digit { text-align: center; }
.screen--juegos .ap-txt--m .jg-digit { font-size: min(52cqh, 30cqw); }
.screen--juegos .ap-txt--l .jg-digit { font-size: min(34cqh, 17cqw); -webkit-text-stroke-width: 0.04em; }
.screen--juegos .ap-txt--xl .jg-digit { font-size: min(24cqh, 12cqw); line-height: 1.08; -webkit-text-stroke-width: 0.035em; }
.screen--juegos .jg-num--solo.ap-txt .jg-digit { max-width: 100%; overflow-wrap: anywhere; }
.screen--juegos .ap-txt-ico { width: min(42cqh, 40cqw); height: min(42cqh, 40cqw); flex: 0 0 auto; }
.screen--juegos .ap-yes .jg-digit,
.screen--juegos .ap-no .jg-digit { font-size: min(30cqh, 24cqw); }
.screen--juegos .jg-quiz .ap-txt.is-ok { background: #fff7d1; box-shadow: 0 0 0 6px #ffd23f, 0 6px 0 rgba(43, 34, 64, 0.2); }
/* Modo "en orden": el número de la que ya se tocó. */
.screen--juegos .ap-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: clamp(26px, 5cqmin, 38px);
  height: clamp(26px, 5cqmin, 38px);
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: clamp(14px, 2.8cqmin, 20px);
  font-weight: 700;
  animation: jg-count 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.screen--juegos .jg-quiz .jg-animal.is-ok,
.screen--juegos .jg-quiz .ap-scard.is-ok { background: #fff7d1; box-shadow: 0 0 0 6px #ffd23f, 0 6px 0 rgba(43, 34, 64, 0.2); }

/* ---------- Teclado de números (dictado y cuentas) ---------- */
.screen--juegos .ap-play--keypad .ap-kp {
  flex: 1 1 46%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vmin, 16px);
  padding: 0 clamp(10px, 2.5vmin, 24px) clamp(10px, 2.4vmin, 22px);
}
@container (min-aspect-ratio: 1 / 1) {
  .screen--juegos .ap-play--keypad.has-show { flex-direction: row; }
  .screen--juegos .ap-play--keypad.has-show .ap-show { flex: 1 1 60%; padding-bottom: clamp(10px, 2.4vmin, 22px); }
  .screen--juegos .ap-play--keypad.has-show .ap-kp { flex: 0 0 auto; }
}
.screen--juegos .ap-kp-slots { display: flex; gap: 10px; }
.screen--juegos .ap-kp-slot {
  display: grid;
  place-items: center;
  width: clamp(50px, min(11cqh, 9cqw), 84px);
  height: clamp(58px, min(13cqh, 10.5cqw), 96px);
  border: 4px solid rgba(43, 34, 64, 0.3);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(43, 34, 64, 0.14);
  font-size: clamp(34px, min(10cqh, 8cqw), 64px);
  font-weight: 700;
  color: var(--ink);
}
.screen--juegos .ap-kp-slot.on { border-color: var(--blue); }
.screen--juegos .ap-kp-slots.is-ok .ap-kp-slot { border-color: var(--ink); background: #fff7d1; box-shadow: 0 0 0 5px #ffd23f; }
.screen--juegos .ap-kp-slots.jg-no { animation: jg-shake 0.4s ease; }
.screen--juegos .ap-kp-keys {
  --k: clamp(44px, min(10cqh, 13cqw), 80px);
  display: grid;
  grid-template-columns: repeat(3, var(--k));
  grid-auto-rows: calc(var(--k) * 0.82);
  gap: clamp(6px, 1.3vmin, 12px);
}
.screen--juegos .ap-kp-key {
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(43, 34, 64, 0.2);
  font: inherit;
  font-size: calc(var(--k) * 0.48);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
.screen--juegos .ap-kp-key:active,
.screen--juegos .ap-kp-key.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43, 34, 64, 0.2); }
.screen--juegos .ap-kp-key:focus-visible { box-shadow: 0 0 0 4px var(--blue); }
.screen--juegos .ap-kp-key > .icon { width: 62%; height: 62%; pointer-events: none; }

/* ---------- Medalla de la partida (sobre los fuegos artificiales) ---------- */
.ap-medal {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 22%;
  translate: -50% -50%;
  display: flex;
  gap: clamp(6px, 2vmin, 18px);
  pointer-events: none;
}
.ap-medal-star .icon {
  display: block;
  width: clamp(60px, 13vmin, 120px);
  height: clamp(60px, 13vmin, 120px);
  filter: grayscale(1) brightness(1.6);
  opacity: 0.35;
}
.ap-medal-star { animation: pop-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.ap-medal-star.on .icon { filter: drop-shadow(0 0 12px rgba(255, 210, 63, 0.8)); opacity: 1; }
.ap-medal-star:nth-child(2) { translate: 0 -18%; }

/* ---------- Pantallas para aprender: piezas comunes ---------- */
/* Un panel centrado con lo que se explica y, abajo, botones para cambiar el ejemplo. */
.screen--juegos .ap-learn {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vmin, 22px);
  padding: 0 clamp(10px, 2.5vmin, 24px) clamp(12px, 3vmin, 26px);
}
.screen--juegos .ap-learn-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  container-type: size;
}
.screen--juegos .ap-learn-say {
  max-width: 100%;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.14);
  font-size: clamp(17px, 3vmin, 28px);
  font-weight: 700;
  text-align: center;
}
.screen--juegos .ap-learn-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vmin, 16px); }
.screen--juegos .ap-pill {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 54px;
  padding: 0 1em 0 0.5em;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(43, 34, 64, 0.18);
  font: inherit;
  font-size: clamp(17px, 2.6vmin, 22px);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
.screen--juegos .ap-pill .icon { width: 1.8em; height: 1.8em; flex: 0 0 auto; }
.screen--juegos .ap-pill:active,
.screen--juegos .ap-pill.is-pressed { transform: translateY(3px); box-shadow: 0 2px 0 rgba(43, 34, 64, 0.18); }
.screen--juegos .ap-pill:focus-visible { box-shadow: 0 0 0 4px var(--blue), 0 5px 0 rgba(43, 34, 64, 0.18); }
.screen--juegos .ap-pill--go { background: linear-gradient(160deg, #7fe6bd, #2bc48a); }

/* Tarjeta de escena o dibujo con nombre abajo (para aprender). */
.screen--juegos .ap-scard {
  container-type: size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqh;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(43, 34, 64, 0.2);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.screen--juegos .ap-scard:active { transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 rgba(43, 34, 64, 0.2); }
.screen--juegos .ap-scard:focus-visible { box-shadow: 0 0 0 4px var(--blue), 0 6px 0 rgba(43, 34, 64, 0.2); }
.screen--juegos .ap-scard > svg { flex: 1 1 auto; width: 100%; min-height: 0; overflow: visible; }
.screen--juegos .ap-scard .jg-name { font-size: min(11cqh, 8.5cqw); letter-spacing: 0.02em; }
.screen--juegos .ap-scard.jg-talk > svg { animation: jg-jelly 0.65s ease; }
.screen--juegos .ap-scard.jg-talk .jg-name { animation: jg-name 0.65s ease; }
.screen--juegos .jg-quiz .ap-scard .jg-name { display: none; }
.screen--juegos .jg-quiz .ap-scard.ap-keep-name .jg-name { display: block; }

@media (prefers-reduced-motion: reduce) {
  .screen--juegos .ap-show,
  .ap-medal-star,
  .screen--juegos .ap-badge,
  .screen--juegos .ap-kp-slots.jg-no,
  .screen--juegos .ap-scard.jg-talk > svg,
  .screen--juegos .ap-scard.jg-talk .jg-name { animation: none; }
}

/* ---------- Ayuda para los grandes: el botón (?) de la barra de los juegos y su ventana ---------- */
/* Con el botón de ayuda, los nombres largos se cortan con "…" en lugar de empujar los botones afuera. */
.jg-bar .topbar-title span { overflow: hidden; text-overflow: ellipsis; }
.hm-info .jg-help-ico { width: 58px; height: 58px; flex: 0 0 auto; }
.hm-info.jg-help .hm-note { margin-top: 14px; }
@media (max-width: 600px) {
  .hm-info .jg-help-ico { width: 46px; height: 46px; }
}

/* ---------- Subtítulos: lo que dice la voz en inglés, escrito (js/juegos/subtitulos.js) ----------
   Siempre ocupa su lugar (aunque esté vacío) para que las tarjetas de abajo no salten de tamaño. Al tocarlo, la voz
   repite la frase. La palabra que se está diciendo se resalta. Queda por encima de los fuegos del final. */
.screen--juegos .ap-caption {
  position: relative;
  z-index: 7;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-sizing: border-box;
  width: calc(100% - 2 * clamp(10px, 2.5vmin, 24px));
  max-width: 900px;
  min-height: 2.7em;
  margin: 0 auto clamp(8px, 1.6vmin, 14px);
  padding: 0.25em 0.9em;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(43, 34, 64, 0.16);
  color: var(--ink);
  font: inherit;
  font-size: clamp(18px, 3.2vmin, 30px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.screen--juegos .ap-caption[hidden] { display: flex; visibility: hidden; }
.screen--juegos .ap-caption:active { transform: scale(0.98); }
.screen--juegos .ap-caption .icon { width: 1.4em; height: 1.4em; flex: 0 0 auto; }
.ap-cap-t { min-width: 0; overflow-wrap: anywhere; }
.ap-w { margin: 0 -0.12em; padding: 0.02em 0.12em; border-radius: 0.35em; transition: background-color 0.08s ease; }
.ap-w.on { background: #ffd23f; box-shadow: 0 0 0 2px #ffb938; }
@media (max-height: 520px) { .screen--juegos .ap-caption { font-size: 16px; min-height: 2.3em; } }