/* Aprendi2 — juegos de Inglés (#ingles/...). Todo bajo .screen--juegos (las pantallas usan juegos.css y ap.css). */

/* Grillas para aprender: tarjetas con el dibujo y la palabra. */
.screen--juegos .jg-grid.ap-vocab { --cols: 4; --rows: 3; }
@media (min-aspect-ratio: 16 / 9) { .screen--juegos .jg-grid.ap-vocab { --cols: 6; --rows: 2; } }
@media (max-aspect-ratio: 1 / 1) { .screen--juegos .jg-grid.ap-vocab { --cols: 3; --rows: 4; } }
.screen--juegos .jg-grid.ap-nums20 { --cols: 5; --rows: 4; }
@media (max-aspect-ratio: 1 / 1) { .screen--juegos .jg-grid.ap-nums20 { --cols: 4; --rows: 5; } }
.screen--juegos .jg-grid.ap-adj { --cols: 5; --rows: 2; }
@media (max-aspect-ratio: 1 / 1) { .screen--juegos .jg-grid.ap-adj { --cols: 2; --rows: 5; } }
.screen--juegos .ap-learn--top { justify-content: flex-start; }
.screen--juegos .ap-learn--top > .jg-grid { flex: 1 1 auto; width: 100%; min-height: 0; }
.screen--juegos .jg-quiz.ap-keep-name .jg-name { display: block; font-size: min(10cqh, 8cqw); }
.screen--juegos .jg-quiz.ap-keep-name .jg-drop { width: min(70cqw, 66cqh); height: min(70cqw, 66cqh); }

/* El dibujo grande de la pregunta. */
.screen--juegos .ap-show > .ap-show-pic { width: auto; height: 100%; max-height: 300px; max-width: 100%; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 5px 0 rgba(43, 34, 64, 0.14)); }

/* Respuesta para leer o escuchar (AP.ingles.sayCard): el parlantito la lee, la tarjeta responde. */
.screen--juegos .ap-say {
  container-type: size;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  min-width: 0;
  min-height: 0;
  padding: 8px 14px 8px 8px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(43, 34, 64, 0.2);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.screen--juegos .ap-say:active { transform: translateY(4px) scale(0.98); box-shadow: 0 2px 0 rgba(43, 34, 64, 0.2); }
.screen--juegos .ap-say:focus-visible { box-shadow: 0 0 0 4px var(--blue), 0 6px 0 rgba(43, 34, 64, 0.2); }
.screen--juegos .ap-listen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: min(48cqh, 26cqw, 72px);
  height: min(48cqh, 26cqw, 72px);
  border-radius: 50%;
  background: linear-gradient(160deg, #ffe07a, #ffb938);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.screen--juegos .ap-listen .icon { width: 70%; height: 70%; pointer-events: none; }
.screen--juegos .ap-say-t { font-size: clamp(16px, min(22cqh, 9cqw), 34px); font-weight: 700; line-height: 1.15; text-align: left; }
.screen--juegos .jg-quiz .ap-say.is-ok { background: #fff7d1; box-shadow: 0 0 0 6px #ffd23f, 0 6px 0 rgba(43, 34, 64, 0.2); }

/* Personaje con globito. */
.screen--juegos .ap-bub { display: flex; align-items: flex-end; gap: 4px; height: 100%; max-width: 100%; }
.screen--juegos .ap-bub--r { flex-direction: row-reverse; }
.screen--juegos .ap-bub-who { flex: 0 0 auto; height: 100%; max-height: 230px; width: auto; aspect-ratio: 1; }
.screen--juegos .ap-bub-t {
  position: relative;
  align-self: flex-start;
  margin-top: 4%;
  max-width: 60cqw;
  padding: 0.4em 0.8em;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(43, 34, 64, 0.18);
  font-size: clamp(18px, min(11cqh, 5cqw), 40px);
  font-weight: 700;
  line-height: 1.15;
}
.screen--juegos .ap-bub-t::before { content: ''; position: absolute; left: -16px; bottom: 14px; border: 10px solid transparent; border-right: 14px solid var(--ink); border-left: 0; }
.screen--juegos .ap-bub--r .ap-bub-t::before { left: auto; right: -16px; border-right: 0; border-left: 14px solid var(--ink); }

/* La granja y el mar (There is a...). */
.screen--juegos .ap-farm { width: 100%; height: 100%; max-width: 640px; border: 4px solid var(--ink); border-radius: 20px; background: #e6f7ff; }

/* Do you like...? El chico, su carita y la comida. */
.screen--juegos .ap-like { display: flex; align-items: center; justify-content: center; gap: 2cqw; height: 100%; }
.screen--juegos .ap-like > svg { height: 100%; width: auto; aspect-ratio: 1; max-height: 240px; }
.screen--juegos .ap-like-face { max-height: 130px !important; align-self: flex-start; }

/* Can a fish fly? El animal, un signo de pregunta y la habilidad. */
.screen--juegos .ap-can { display: flex; align-items: center; justify-content: center; gap: 3cqw; height: 100%; }
.screen--juegos .ap-can-who { height: min(100%, 36cqw); max-height: 220px; width: auto; aspect-ratio: 1; }
.screen--juegos .ap-can-q { font-size: min(40cqh, 14cqw); font-weight: 700; color: #ff5a5f; -webkit-text-stroke: 0.05em var(--ink); paint-order: stroke fill; }
.screen--juegos .ap-can-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: min(100%, 46cqw); max-height: 240px; aspect-ratio: 0.82; padding: 8px; border: 4px solid var(--ink); border-radius: 22px; background: #fff; }
.screen--juegos .ap-can-act > svg { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1; background: #e6f7ff; border-radius: 14px; }
.screen--juegos .ap-can-act > span { font-size: clamp(18px, 8cqh, 34px); font-weight: 700; }

/* My body: el chico con zonas para tocar (para aprender y para jugar). */
.screen--juegos .ap-body,
.screen--juegos .jg-quiz.ap-bodyq {
  position: relative;
  display: block;
  width: min(100%, calc(100cqh * 0.769));
  height: auto;
  max-height: 100%;
  aspect-ratio: 200 / 260;
  margin: 0 auto;
  padding: 0;
}
.screen--juegos .ap-body-kid { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen--juegos .ap-zone {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: background 0.2s, box-shadow 0.2s;
}
.screen--juegos .jg-quiz.ap-bodyq > * { animation: none; }
.screen--juegos .ap-zone.is-on,
.screen--juegos .ap-zone.is-ok { background: rgba(255, 210, 63, 0.45); box-shadow: 0 0 0 4px #ffd23f; }
.screen--juegos .jg-quiz .ap-zone.is-off { opacity: 1; background: rgba(255, 90, 95, 0.25); }
.screen--juegos .ap-zone:focus-visible { box-shadow: 0 0 0 4px var(--blue); }

/* Let's talk: escenas de diálogo. */
.screen--juegos .ap-talk { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; width: 100%; max-width: 900px; height: 100%; container-type: size; }
.screen--juegos .ap-talk .ap-bub { height: 100%; flex: 1 1 0; min-width: 0; }
.screen--juegos .ap-talk-thing { flex: 0 0 auto; height: 50%; width: auto; aspect-ratio: 1; align-self: center; }
.screen--juegos .ap-talk-list { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(10px, 2vmin, 18px); align-content: start; padding: 4px 4px 12px; }
.screen--juegos .ap-talk-card { height: 190px; padding: 10px; border: 4px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 0 6px 0 rgba(43, 34, 64, 0.2); cursor: pointer; touch-action: manipulation; }
.screen--juegos .ap-talk-card .ap-bub-t { font-size: clamp(15px, 9cqh, 24px); }
.screen--juegos .ap-talk-card.jg-talk { animation: jg-name 0.6s ease; }