/* Aprendi2 — lo propio de Aprendi2 sobre el diseño de Colorines (core.css, home.css y juegos.css):
   el inicio con dos tarjetas, 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: dos tarjetas (Matemática e Inglés) ---------- */
.screen--inicio .home-grid {
  --g: clamp(12px, 3cqmin, 34px);
  --cw: min(calc(100cqw - 8px), calc((100cqh - var(--g)) / 2 * 1.35), 470px);
  --ch: min(calc((100cqh - var(--g)) / 2), calc(var(--cw) * 0.9));
  grid-template-columns: var(--cw);
  grid-template-rows: repeat(2, var(--ch));
}
@container (min-aspect-ratio: 11 / 10) {
  .screen--inicio .home-grid {
    --cw: min(calc((100cqw - var(--g)) / 2), calc(100cqh * 1.2), 500px);
    --ch: min(100cqh, calc(var(--cw) * 0.95));
    grid-template-columns: repeat(2, var(--cw));
    grid-template-rows: var(--ch);
  }
}
.screen--inicio .home-cell:nth-child(n) { grid-column: auto; }
.screen--inicio .home-card { --card-font: clamp(18px, 6cqmin, 30px); }
.screen--inicio .home-card--mate { --c1: #a6e6ff; --c2: #45b6f2; }
.screen--inicio .home-card--ingles { --c1: #d9c9ff; --c2: #9b7bff; }
/* El 2 del logo: blanco, en un bloque violeta como los de los juegos. */
.screen--inicio .home-two {
  margin-left: 0.08em;
  padding: 0 0.16em;
  border: 0.06em solid var(--ink);
  border-radius: 0.2em;
  background: linear-gradient(160deg, #a58cff, #7b61ff);
  box-shadow: 0 0.07em 0 rgba(43, 34, 64, 0.25);
  line-height: 1;
}
/* 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": 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;
}
/* 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; }
}