/* Los juegos. Se ven en la compu del docente, proyectados (modo aula: .g-aula) y en el celular del alumno.
   Todo escala con --e: en modo aula se agranda para leerse desde el fondo del aula. */

.g-body { background: var(--crema); min-height: 100vh; min-height: 100dvh; }
.g {
  --e: 1;
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr;
  max-width: 1280px; margin-inline: auto; padding: 0 clamp(12px, 3vw, 28px) 24px;
}
.g-aula .g { --e: 1.3; max-width: none; padding-bottom: 84px; } /* lugar para el marcador de equipos */
.g-body:fullscreen, .g:fullscreen { background: var(--crema); }

/* Barra */
.g-barra { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 0 10px; }
.g-volver {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  border: 1.5px solid var(--linea); background: var(--blanco); color: var(--ink); font: 700 1.2rem var(--f-ui);
}
.g-volver:hover { background: var(--ink); color: var(--crema); }
.g-titulo { font-size: calc(clamp(1.3rem, 3vw, 2rem) * var(--e)); margin: 0; }
.g-consigna { margin: 2px 0 0; font-style: italic; color: var(--ink-2); font-size: calc(1rem * var(--e)); }
.g-consigna-es { margin: 2px 0 0; font-family: var(--f-ui); font-size: calc(.85rem * var(--e)); color: var(--verde-oscuro); }
.g-herramientas { display: flex; gap: 6px; }
.g-boton {
  min-width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--blanco); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; font: 700 .85rem var(--f-ui); padding: 0 10px;
}
.g-boton svg { width: 20px; height: 20px; }
.g-boton:hover { border-color: var(--ink); }
.g-boton[aria-pressed="true"][data-accion="traducir"] { background: var(--verde-oscuro); color: var(--crema); border-color: var(--verde-oscuro); }
.g-boton[aria-pressed="false"][data-accion="sonido"] .g-ondas { opacity: 0; }
@media (max-width: 640px) {
  .g-barra { grid-template-columns: auto 1fr; }
  .g-herramientas { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Estado */
.g-estado { display: flex; gap: 14px; align-items: center; padding: 4px 0 12px; }
.g-progreso { flex: 1; height: 10px; border-radius: 999px; background: var(--crema-3); overflow: hidden; }
.g-progreso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--verde), var(--sole)); border-radius: inherit; transition: width 400ms var(--curva); }
.g-marcador { display: flex; gap: 8px; }
.g-pastilla { font: 600 calc(.82rem * var(--e)) var(--f-ui); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.g-pastilla b { font-size: 1.1em; }
.g-pastilla--bien { background: var(--verde-suave); color: var(--verde-oscuro); }
.g-pastilla--mal { background: var(--terra-suave); color: var(--terra-oscuro); }

.g-escenario { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(18px * var(--e)); padding-top: 8px; }
.g-cargando { font-family: var(--f-ui); color: var(--ink-3); margin-top: 20vh; }

/* Imagen de una palabra: ícono pintado con el color del texto (máscara) o imagen subida. */
.g-img { display: grid; place-items: center; border-radius: 50%; background: var(--terra-suave); color: var(--terra-oscuro); flex: none; }
.g-img .g-icono { width: 64%; height: 64%; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.g-img img { width: 72%; height: 72%; object-fit: contain; }
/* La casita: el ícono baja con un margen PROPIO. Un padding en % se calcula sobre el ancho del contenedor
   padre (toda la pantalla) y aplastaba el ícono a una tira de 46 px. El margen del hijo, en cambio, se
   calcula sobre la casita. */
.g-img--casa { border-radius: 16px 16px 20px 20px; clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%); background: var(--verde-suave); color: var(--verde-oscuro); }
.g-img--casa .g-icono, .g-img--casa img { width: 56%; height: 56%; margin-top: 24%; }
/* Sin dibujo: la palabra en español, grande, en el lugar de la imagen. */
.g-pregunta .g-img--texto, .g-img--texto {
  width: auto !important; height: auto !important; min-height: calc(110px * var(--e)); border-radius: var(--r-l);
  padding: calc(18px * var(--e)) calc(32px * var(--e)); max-width: min(100%, calc(640px * var(--e)));
  font: 700 calc(clamp(1.6rem, 4.5vw, 2.6rem) * var(--e)) var(--f-display); color: var(--ink); text-align: center;
  background: var(--sole-suave); box-shadow: var(--sombra-1);
}
.g-carta__es { font-family: var(--f-ui) !important; font-weight: 600 !important; color: var(--verde-oscuro) !important; background: var(--verde-suave) !important; }

/* Aviso flotante */
.g-aviso {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  font: 700 calc(1.1rem * var(--e)) var(--f-ui); padding: 12px 22px; border-radius: 999px; box-shadow: var(--sombra-2);
  transition: opacity 180ms, transform 220ms var(--curva); z-index: 30;
}
.g-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.g-aviso.bien { background: var(--verde-oscuro); color: var(--crema); }
.g-aviso.mal { background: var(--terra-oscuro); color: var(--crema); }

/* Botones de respuesta (comunes) */
.g-opcion {
  font: 700 calc(clamp(1.05rem, 2.2vw, 1.4rem) * var(--e)) var(--f-display); color: var(--ink);
  background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--r-m);
  padding: calc(14px * var(--e)) calc(18px * var(--e)); min-height: calc(60px * var(--e)); cursor: pointer;
  transition: transform 120ms var(--curva), border-color 120ms, background 120ms; text-align: center; touch-action: manipulation;
}
.g-opcion:hover { border-color: var(--ink); }
.g-opcion:active { transform: scale(.97); }
.g-opcion.ok { background: var(--verde-suave); border-color: var(--verde); color: var(--verde-oscuro); }
.g-opcion.no { background: var(--terra-suave); border-color: var(--terra-oscuro); color: var(--terra-oscuro); animation: sacudir 380ms; }
.g-opcion.elegida { border-color: var(--sole); box-shadow: 0 0 0 4px rgb(244 183 64 / .45); }
.g-opcion:disabled { cursor: default; }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.g-entra { animation: aparecer 320ms var(--curva) both; }

/* ── Che cos'è? ── */
/* `width: 100%`: el escenario centra a sus hijos y, sin ancho propio, se encogen al contenido y las opciones quedan angostas. */
.g-pregunta, .g-completa, .g-articolo { width: 100%; }
.g-pregunta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.g-pregunta .g-img { width: calc(clamp(150px, 26vw, 230px) * var(--e)); height: calc(clamp(150px, 26vw, 230px) * var(--e)); box-shadow: var(--sombra-2); }
.g-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, calc(680px * var(--e))); }
@media (max-width: 480px) { .g-opciones { grid-template-columns: 1fr; } }
.g-escuchar {
  display: inline-flex; gap: 8px; align-items: center; font: 600 .9rem var(--f-ui); border: 1.5px solid var(--linea);
  background: var(--blanco); border-radius: 999px; padding: 8px 14px; cursor: pointer; color: var(--ink-2);
}
.g-escuchar svg { width: 18px; height: 18px; }

/* ── Abbina ── */
.g-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 5vw, 64px); width: min(100%, calc(820px * var(--e))); }
.g-columna { display: grid; gap: 10px; align-content: start; }
.g-columna .g-opcion { font-size: calc(clamp(1rem, 2vw, 1.25rem) * var(--e)); min-height: calc(56px * var(--e)); }
.g-columna--es .g-opcion { font-family: var(--f-ui); font-weight: 600; }
.g-opcion[data-par] { cursor: default; }
.g-opcion[data-par="0"] { background: #DFF0E5; border-color: #248F51; color: #15623A; }
.g-opcion[data-par="1"] { background: #FDF0D2; border-color: #D69A1E; color: #6B4500; }
.g-opcion[data-par="2"] { background: #E3ECF8; border-color: #3E6DB5; color: #1F3F73; }
.g-opcion[data-par="3"] { background: #FBE6DA; border-color: #C24420; color: #8E2E13; }
.g-opcion[data-par="4"] { background: #EFE3F5; border-color: #8A4FA6; color: #55286C; }
.g-opcion[data-par="5"] { background: #E2F2F1; border-color: #2B8C86; color: #135652; }

/* ── Dove si trova? (la casa) ── */
.g-casa { width: min(100%, calc(980px * var(--e))); }
.g-techo { height: calc(48px * var(--e)); background: var(--terra-oscuro); clip-path: polygon(6% 100%, 50% 0, 94% 100%); margin: 0 6%; }
.g-stanze {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--e)), 1fr)); gap: 8px;
  background: var(--terra-oscuro); padding: 8px; border-radius: 0 0 var(--r-m) var(--r-m);
}
.g-stanza {
  background: var(--crema); border-radius: var(--r-s); padding: 10px; min-height: calc(120px * var(--e));
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; border: 3px solid transparent;
  transition: border-color 120ms, background 120ms;
}
.g-stanza__nombre { display: flex; align-items: center; gap: 8px; font: 700 calc(1rem * var(--e)) var(--f-display); }
.g-stanza__nombre .g-img { width: calc(38px * var(--e)); height: calc(38px * var(--e)); background: var(--verde-suave); color: var(--verde-oscuro); }
.g-stanza__dentro { display: flex; flex-wrap: wrap; gap: 6px; }
.g-stanza.destino, .g-stanza:hover { border-color: var(--sole); background: var(--sole-suave); }
.g-stanza.ok { border-color: var(--verde); background: var(--verde-suave); }
.g-stanza.no { border-color: var(--terra-oscuro); animation: sacudir 380ms; }
.g-mini { display: inline-flex; align-items: center; gap: 4px; font: 600 calc(.78rem * var(--e)) var(--f-ui); background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; padding: 3px 8px 3px 3px; animation: aparecer 260ms var(--curva) both; }
.g-mini .g-img { width: calc(22px * var(--e)); height: calc(22px * var(--e)); }
.g-bandeja { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(100%, calc(980px * var(--e))); min-height: 80px; }
.g-ficha {
  display: inline-flex; align-items: center; gap: 10px; background: var(--blanco); border: 2px solid var(--linea); border-radius: 999px;
  padding: 6px 16px 6px 6px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  font: 700 calc(clamp(.95rem, 1.8vw, 1.15rem) * var(--e)) var(--f-display); color: var(--ink);
  transition: transform 120ms var(--curva), box-shadow 120ms;
}
.g-ficha .g-img { width: calc(44px * var(--e)); height: calc(44px * var(--e)); }
.g-ficha:hover { box-shadow: var(--sombra-1); }
.g-ficha.elegida { border-color: var(--sole); box-shadow: 0 0 0 4px rgb(244 183 64 / .45); transform: translateY(-2px); }
.g-ficha.no { animation: sacudir 380ms; border-color: var(--terra-oscuro); }
.g-ficha.arrastrando { opacity: .35; }
.g-fantasma { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); box-shadow: var(--sombra-2); cursor: grabbing; }
.g-ayuda { font: 500 calc(.88rem * var(--e)) var(--f-ui); color: var(--ink-3); text-align: center; margin: 0; }

/* ── Completa la parola ── */
.g-completa { display: flex; flex-direction: column; align-items: center; gap: calc(16px * var(--e)); }
.g-completa .g-img { width: calc(clamp(130px, 22vw, 200px) * var(--e)); height: calc(clamp(130px, 22vw, 200px) * var(--e)); box-shadow: var(--sombra-2); }
.g-pista { font: 500 calc(1rem * var(--e)) var(--f-ui); color: var(--ink-3); }
.g-palabra { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: calc(6px * var(--e)); }
.g-articulo { font: italic 400 calc(clamp(1.6rem, 4vw, 2.4rem) * var(--e)) var(--f-display); color: var(--ink-2); margin-right: calc(8px * var(--e)); }
.g-letra {
  width: calc(clamp(34px, 6vw, 52px) * var(--e)); height: calc(clamp(46px, 8vw, 66px) * var(--e)); display: grid; place-items: center;
  font: 700 calc(clamp(1.6rem, 4vw, 2.4rem) * var(--e)) var(--f-display); border-bottom: 4px solid var(--ink); text-transform: lowercase;
}
.g-letra.hueco { border-bottom-color: var(--terra-oscuro); background: var(--terra-suave); border-radius: 8px 8px 0 0; }
.g-letra.hueco.actual { background: var(--sole-suave); border-bottom-color: var(--sole); }
.g-letra.puesta { color: var(--verde-oscuro); animation: aparecer 200ms both; }
.g-letra.espacio { border-bottom: 0; width: calc(18px * var(--e)); }
.g-teclas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: calc(560px * var(--e)); }
.g-tecla {
  width: calc(clamp(48px, 9vw, 62px) * var(--e)); height: calc(clamp(48px, 9vw, 62px) * var(--e)); border-radius: var(--r-m);
  font: 700 calc(1.5rem * var(--e)) var(--f-display); background: var(--blanco); border: 2px solid var(--linea); cursor: pointer; color: var(--ink);
}
.g-tecla:hover { border-color: var(--ink); }
.g-tecla.usada { visibility: hidden; }
.g-tecla.no { animation: sacudir 380ms; border-color: var(--terra-oscuro); background: var(--terra-suave); }

/* ── L'articolo giusto ── */
.g-articolo { display: flex; flex-direction: column; align-items: center; gap: calc(16px * var(--e)); }
.g-articolo .g-img { width: calc(clamp(130px, 22vw, 200px) * var(--e)); height: calc(clamp(130px, 22vw, 200px) * var(--e)); box-shadow: var(--sombra-2); }
.g-frase { font: 700 calc(clamp(2rem, 6vw, 3.4rem) * var(--e)) var(--f-display); display: flex; gap: .25em; align-items: baseline; }
.g-frase .g-hueco-art { display: inline-block; min-width: 2.2em; border-bottom: 5px solid var(--terra-oscuro); text-align: center; color: var(--verde-oscuro); }
.g-articoli { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.g-articoli .g-opcion { min-width: calc(96px * var(--e)); font-size: calc(clamp(1.4rem, 3vw, 2rem) * var(--e)); }
.g-regla { font: 500 calc(.95rem * var(--e)) var(--f-ui); background: var(--sole-suave); color: #5A3B00; padding: 10px 16px; border-radius: var(--r-m); max-width: 560px; text-align: center; }

/* ── Memory ── */
.g-memory { display: grid; gap: calc(10px * var(--e)); grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); width: min(100%, calc(860px * var(--e))); perspective: 900px; }
.g-carta { aspect-ratio: 1; position: relative; border: 0; padding: 0; background: none; cursor: pointer; }
.g-carta__cara {
  position: absolute; inset: 0; border-radius: var(--r-m); display: grid; place-items: center; backface-visibility: hidden;
  transition: transform 420ms var(--curva); padding: 8px; text-align: center;
}
.g-carta__dorso { background: var(--terracota); color: var(--crema); box-shadow: var(--sombra-1); }
.g-carta__dorso::after { content: "A"; font: 600 calc(2.2rem * var(--e)) var(--f-script); opacity: .9; }
.g-carta__frente { background: var(--blanco); border: 2px solid var(--linea); transform: rotateY(180deg); font: 700 calc(clamp(.9rem, 2vw, 1.25rem) * var(--e)) var(--f-display); color: var(--ink); }
.g-carta__frente .g-img { width: 78%; height: 78%; background: none; }
.g-carta.vuelta .g-carta__dorso { transform: rotateY(-180deg); }
.g-carta.vuelta .g-carta__frente { transform: rotateY(0); }
.g-carta.par .g-carta__frente { border-color: var(--verde); background: var(--verde-suave); color: var(--verde-oscuro); }
.g-carta.no .g-carta__frente { border-color: var(--terra-oscuro); }
@media (max-width: 560px) { .g-memory { --cols: 3 !important; } }

/* ── Final ── */
.g-final {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgb(36 26 20 / .55); padding: 20px;
  animation: aparecer 260ms both;
}
.g-final__caja { background: var(--crema); border-radius: var(--r-l); padding: clamp(24px, 5vw, 44px); text-align: center; max-width: 520px; width: 100%; box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.g-final h2 { font-family: var(--f-script); font-weight: 600; font-size: calc(clamp(2.6rem, 7vw, 3.6rem) * var(--e)); color: var(--terra-oscuro); margin: 6px 0; }
.g-estrellas { display: flex; justify-content: center; gap: 8px; }
.g-estrellas svg { width: calc(48px * var(--e)); height: calc(48px * var(--e)); color: var(--crema-3); }
.g-estrellas svg.llena { color: var(--sole); animation: aparecer 400ms var(--curva) both; }
.g-estrellas svg.llena:nth-child(2) { animation-delay: 120ms; }
.g-estrellas svg.llena:nth-child(3) { animation-delay: 240ms; }
.g-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 41; }

/* ── Equipos (modo aula) ── */
.g-equipos { position: fixed; right: 16px; bottom: 16px; display: flex; gap: 10px; z-index: 20; }
.g-equipo { display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--crema); border-radius: 999px; padding: 6px 8px 6px 16px; font: 600 .95rem var(--f-ui); box-shadow: var(--sombra-2); }
.g-equipo:nth-child(2) { background: var(--verde-oscuro); }
.g-equipo b { font: 700 1.5rem var(--f-display); min-width: 1.6em; text-align: center; color: var(--sole); }
.g-equipo button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .14); color: var(--crema); font: 700 1.1rem var(--f-ui); cursor: pointer; }
.g-equipo button:hover { background: rgb(255 255 255 / .28); }

@media (prefers-reduced-motion: reduce) {
  .g-carta__cara { transition: none; }
}