/* ============================================================
   ESTANQUE (juego de la rana)
   ============================================================ */
.estanque{position:relative;aspect-ratio:16/10;border-radius:var(--r-m);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 110%,#0a3348 0%,var(--agua) 55%,var(--agua-claro) 100%);
  touch-action:manipulation}
.estanque::before,.estanque::after{content:"";position:absolute;left:-50%;width:200%;height:60px;
  background-repeat:repeat-x;background-size:220px 60px;opacity:.5;pointer-events:none}
.estanque::before{top:8%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cpath d='M0 30 Q55 4 110 30 T220 30' fill='none' stroke='%23bdf0fb' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");animation:derivar 26s linear infinite}
.estanque::after{bottom:6%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cpath d='M0 30 Q55 50 110 30 T220 30' fill='none' stroke='%23e8fbff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");animation:derivar 34s linear infinite reverse}
@keyframes derivar{to{transform:translateX(220px)}}
.orilla{position:absolute;top:0;left:0;width:100%;height:11%;background:var(--papel-hondo);
  clip-path:polygon(0 0,100% 0,100% 62%,88% 82%,74% 60%,60% 84%,46% 62%,32% 86%,18% 64%,6% 84%,0 66%);pointer-events:none}
.nenufar{position:absolute;transform:translate(-50%,-50%);width:23%;max-width:170px;aspect-ratio:1;
  display:flex;align-items:flex-end;justify-content:center;border-radius:50%;transition:transform .18s ease}
.nenufar .hoja{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,30,45,.35))}
.nenufar .etiqueta{position:relative;z-index:2;transform:translateY(38%);font-family:var(--display);
  font-weight:500;font-size:clamp(11px,2.1vw,17px);line-height:1.15;text-align:center;color:var(--tinta);
  background:var(--papel);padding:6px 10px;border-radius:var(--r-s);box-shadow:0 3px 0 rgba(9,42,58,.25);max-width:150%}
.nenufar .letra{position:absolute;top:6%;left:6%;z-index:3;width:26px;height:26px;border-radius:50%;
  background:var(--papel);color:var(--tinta);font-family:var(--hud);font-size:13px;display:grid;
  place-items:center;box-shadow:0 2px 0 rgba(9,42,58,.3)}
.nenufar:not(:disabled):hover{transform:translate(-50%,-54%)}
.nenufar:disabled{cursor:default}
.nenufar.correcta{--tono-hoja:#68bd5b;--tono-vena:#3f8f4f;animation:latir .5s ease}
.nenufar.errada{--tono-hoja:#e4572e;--tono-vena:#b93f1f;animation:temblar .4s ease}
@keyframes latir{50%{transform:translate(-50%,-58%) scale(1.07)}}
@keyframes temblar{25%{transform:translate(-54%,-50%)}75%{transform:translate(-46%,-50%)}}
.rana{position:absolute;width:16%;max-width:120px;pointer-events:none;z-index:5;transform:translate(-50%,-64%)}
.rana svg{width:100%;height:auto;filter:drop-shadow(0 8px 8px rgba(0,30,45,.4))}
.chapoteo{position:absolute;width:14%;aspect-ratio:1;border:4px solid #eafcff;border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);opacity:.9;pointer-events:none;z-index:4}
.chapoteo.va{animation:expandir .7s ease-out forwards}
@keyframes expandir{to{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
.aviso{position:absolute;top:15%;left:50%;transform:translateX(-50%);z-index:7;font-family:var(--display);
  font-size:clamp(16px,3.2vw,23px);background:var(--papel);padding:8px 20px;border-radius:999px;
  box-shadow:var(--sombra);opacity:0;pointer-events:none}
.aviso.va{animation:asomar 1.1s ease both}
@keyframes asomar{0%{opacity:0;transform:translate(-50%,10px)}20%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-12px)}}

/* ============================================================
   OTROS MOTORES
   ============================================================ */
.opciones-quiz{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.op{display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:3px solid var(--papel-hondo);
  border-radius:var(--r-m);padding:13px 15px;font-size:16px;transition:transform .12s,border-color .12s}
.op:not(:disabled):hover{transform:translateY(-2px);border-color:var(--agua)}
.op .letra{flex:none;width:30px;height:30px;border-radius:50%;background:var(--papel-hondo);
  font-family:var(--hud);font-size:14px;display:grid;place-items:center}
.op.bien{border-color:var(--hoja-claro);background:#eaf8e6}
.op.bien .letra{background:var(--hoja-claro);color:#fff}
.op.mal{border-color:var(--coral);background:#fdeee9}
.op.mal .letra{background:var(--coral);color:#fff}

.vf{display:grid;gap:14px;grid-template-columns:1fr 1fr;max-width:520px;margin:0 auto}
.vf button{font-family:var(--display);font-size:22px;padding:26px 12px;border-radius:var(--r-m);
  border:3px solid transparent;transition:transform .12s}
.vf .si{background:#eaf8e6;color:#1d5730} .vf .no{background:#fdeee9;color:#8c2f13}
.vf button:not(:disabled):hover{transform:translateY(-3px)}
.vf button.elegida{border-color:var(--tinta)}
.vf button.correcta{box-shadow:0 0 0 4px var(--hoja-claro) inset}

.columnas{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.columna{display:grid;gap:9px;align-content:start}
.ficha-par{background:#fff;border:3px solid var(--papel-hondo);border-radius:var(--r-s);padding:12px;
  text-align:left;font-size:15px;transition:transform .12s}
.ficha-par:not(:disabled):hover{transform:translateX(3px);border-color:var(--agua)}
.ficha-par.sel{border-color:var(--junco);background:#fff8e8}
.ficha-par.hecha{opacity:.45;border-style:dashed;cursor:default;background:#eaf8e6}
.ficha-par.fallo{animation:temblar .35s ease;border-color:var(--coral)}

.tablero-memoria{display:grid;gap:9px}
.carta{aspect-ratio:3/4;border-radius:var(--r-s);background:var(--agua);color:#fff;display:grid;
  place-items:center;padding:8px;text-align:center;font-size:14px;line-height:1.2;
  transition:transform .25s;transform-style:preserve-3d;position:relative}
.carta span{display:none}
.carta.abierta,.carta.hecha{background:var(--papel-hondo);color:var(--tinta);transform:rotateY(0)}
.carta.abierta span,.carta.hecha span{display:block}
.carta::after{content:"?";font-family:var(--display);font-size:24px;opacity:.75}
.carta.abierta::after,.carta.hecha::after{content:""}
.carta.hecha{background:#eaf8e6;box-shadow:inset 0 0 0 3px var(--hoja-claro);cursor:default}

.sopa{display:grid;gap:2px;justify-content:center;user-select:none;touch-action:none;margin-bottom:14px}
.celda{width:clamp(22px,4.6vw,34px);aspect-ratio:1;display:grid;place-items:center;background:#fff;
  border-radius:5px;font-family:var(--hud);font-size:clamp(11px,2.2vw,15px);text-transform:uppercase}
.celda.marcada{background:var(--junco)}
.celda.hallada{background:var(--hoja-claro);color:#fff}
.lista-palabras{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.palabra{font-family:var(--hud);font-size:13px;background:var(--papel-hondo);padding:5px 11px;border-radius:999px}
.palabra.hallada{background:#eaf8e6;text-decoration:line-through;opacity:.65}

.texto-huecos{font-size:clamp(16px,3vw,20px);line-height:2.4}
.hueco{display:inline-block;min-width:110px;border-bottom:3px solid var(--agua);padding:2px 8px;
  font-family:var(--display);text-align:center;background:#fff;border-radius:6px 6px 0 0}
.hueco.sel{background:#fff8e8;border-color:var(--junco)}
.hueco.bien{border-color:var(--hoja-claro);background:#eaf8e6}
.hueco.mal{border-color:var(--coral);background:#fdeee9}
.banco{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:2px dashed var(--papel-linea)}
.pieza{background:#fff;border:3px solid var(--papel-hondo);border-radius:999px;padding:8px 16px;
  font-family:var(--display);font-size:15px;transition:transform .12s}
.pieza:not(:disabled):hover{transform:translateY(-2px);border-color:var(--agua)}
.pieza.usada{opacity:.3;cursor:default}

.lista-orden{display:grid;gap:9px;margin-bottom:14px}
.item-orden{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--papel-hondo);
  border-radius:var(--r-s);padding:11px 14px;cursor:grab}
.item-orden.arrastrando{opacity:.4}
.item-orden .rango{font-family:var(--hud);font-size:13px;color:var(--agua);flex:none;width:22px}
.item-orden .flechas{margin-left:auto;display:flex;gap:4px}
.item-orden .flechas button{width:30px;height:30px;border-radius:8px;background:var(--papel-hondo);font-size:13px}
.item-orden.bien{border-color:var(--hoja-claro);background:#eaf8e6}
.item-orden.mal{border-color:var(--coral);background:#fdeee9}

/* resultado */
.marcador{text-align:center;padding:6px 0 14px}
.marcador .cifra{font-family:var(--hud);font-size:clamp(50px,12vw,84px);line-height:1;color:var(--hoja)}
.marcador .de{font-size:19px;opacity:.55}
.repaso{margin-top:18px;border-top:2px dashed var(--papel-linea);padding-top:14px}
.repaso-item{padding:9px 0;border-bottom:1px solid rgba(15,43,56,.09)}
.repaso-item b{font-family:var(--display);font-weight:500}
.marca{font-family:var(--hud);font-size:11px;padding:2px 8px;border-radius:999px;margin-right:8px}
.marca.ok{background:#d6f0d2;color:#1d5730} .marca.mal{background:#fbdcd2;color:#8c2f13}

/* ============================================================
   CARAS CON IMAGEN (memoria y unir comparten el editor "pares")
   ============================================================ */
.cara-img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-s)}
.cara-texto{display:block}

/* Carta de memoria: la imagen manda y el texto queda como pie.
   El contenido va OCULTO hasta destapar la carta, y esa regla tiene que estar
   escrita sobre `.cara`: `.carta .cara` (dos clases) gana por especificidad a
   `.carta span` (una clase y un tipo), así que confiar en aquella dejaba las
   imágenes a la vista con la carta boca abajo. */
.carta .cara{display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:100%;height:100%;padding:6px;overflow:hidden}
.carta.abierta .cara,.carta.hecha .cara{display:flex}
.carta .cara-img{flex:1;min-height:0}
.carta .cara-texto{font-size:13px;line-height:1.15;text-align:center}

/* Ficha de unir: imagen a la izquierda, texto al lado. */
.ficha-par:has(.cara-img){display:flex;align-items:center;gap:10px}
.ficha-par .cara-img{width:48px;height:48px;flex:0 0 auto}
.ficha-par .cara-texto{flex:1;min-width:0}

/* Enunciado con imagen (quiz y rana comparten el editor "preguntas") */
.enunciado-img{display:block;max-width:100%;max-height:190px;object-fit:contain;
  margin:0 auto 10px;border-radius:var(--r-s)}
.enunciado-texto{display:block}

/* Opción de quiz con imagen */
.op .cara{display:flex;align-items:center;gap:10px;min-width:0}
.op .cara-img{width:54px;height:54px;flex:0 0 auto}
.op .cara-texto{min-width:0}

/* Etiqueta del nenúfar: la hoja es pequeña, la imagen va contenida */
.nenufar .etiqueta .cara-img{max-height:38px;margin:0 auto 2px}