/* css/criaturas-cuento.css — 📖 Cuento Mágico (js/juegos/criaturas-cuento.js).
   Diálogo propio .cu-dlg · página de «libro» con la frase y su hueco (color de la familia de la
   respuesta en --c / --c2) · 3 opciones-criatura. Sin scroll horizontal desde 320px. */
.cu-dlg{margin:auto;padding:0;border:0;border-radius:24px;width:min(96vw,620px);max-width:96vw;max-height:94dvh;
  background:var(--surface,#fff);color:var(--text,#1E1B4B);box-shadow:0 20px 60px rgba(30,27,75,.35);overflow:auto;overscroll-behavior:contain}
.cu-dlg::backdrop{background:rgba(30,27,75,.55)}
.cu-in{position:relative;padding:14px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.cu-in .lvl-confetti{z-index:5}
.cu-x{position:absolute;top:8px;right:8px;z-index:20;width:48px;height:48px;border:0;border-radius:50%;
  background:var(--bg,#F1F0FF);color:var(--text,#1E1B4B);font-size:1.15rem;font-weight:800;cursor:pointer}
.cu-x:focus-visible,.cu-bt:focus-visible,.cu-op:focus-visible{outline:3px solid var(--purple,#7C3AED);outline-offset:3px}
.cu-tit{margin:4px 52px 0;font-size:clamp(1.2rem,4.8vw,1.55rem);font-weight:900;text-align:center;color:var(--deep,#2E1065)}
.cu-sub{margin:0;font-size:.95rem;color:var(--text2,#6B7280);text-align:center}
.cu-progreso{width:100%;max-width:420px;height:8px;border-radius:99px;background:var(--bg,#F1F0FF);overflow:hidden}
.cu-progreso i{display:block;height:100%;width:0;border-radius:inherit;background:var(--purple,#7C3AED);transition:width .4s ease}
.cu-zona{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.cu-num{margin:0;font-size:.9rem;font-weight:800;color:var(--text2,#6B7280)}
.cu-tiempo{color:var(--purple,#7C3AED)}

/* página del cuento */
.cu-libro{width:100%;padding:16px 14px 12px;border-radius:18px;background:#FFFBF0;border:3px solid var(--c2);
  box-shadow:inset 0 0 0 1px rgba(30,27,75,.04),0 4px 12px rgba(30,27,75,.08);text-align:center}
.cu-frase{margin:0;font-size:clamp(1.2rem,5.2vw,1.65rem);font-weight:800;line-height:1.45;color:var(--text,#1E1B4B);overflow-wrap:anywhere}
.cu-hueco{display:inline-block;min-width:3.2em;margin:0 .15em;padding:0 .25em;border-bottom:4px dashed var(--c);line-height:1.15;vertical-align:baseline}
.cu-hueco.lleno{min-width:0;border-bottom:0;border-radius:10px;background:var(--c2);color:var(--c);
  box-shadow:0 0 0 3px var(--c);font-weight:900;animation:cu-lleno .5s cubic-bezier(.3,.7,.3,1.4) both}
.cu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cu-es{margin:8px 0 0;font-size:.9rem;font-weight:600;color:var(--text2,#6B7280);font-style:italic}

/* opciones */
.cu-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.cu-op{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:48px;padding:8px 4px 10px;
  border:3px solid var(--c);border-radius:18px;background:var(--c2);color:var(--text,#1E1B4B);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .15s ease}
.cu-op img{width:100%;max-width:120px;aspect-ratio:1;object-fit:contain;pointer-events:none}
.cu-op b{max-width:100%;font-size:clamp(.95rem,4.2vw,1.2rem);font-weight:900;line-height:1.1;overflow-wrap:anywhere}
@media (hover:hover){.cu-op:not(:disabled):hover{transform:translateY(-2px)}}
.cu-op:disabled{cursor:default}
.cu-op.mal{opacity:.45;filter:grayscale(.7)}
.cu-op.bien{box-shadow:0 0 0 4px #22C55E,0 6px 16px rgba(30,27,75,.15);opacity:1}
.cu-op.tiembla{animation:cu-tiembla .45s ease}
@media (max-width:359px){.cu-ops{gap:5px}.cu-op{padding:6px 2px 8px;border-radius:14px}}

.cu-sig-wrap{min-height:48px;display:flex;justify-content:center;width:100%}
.cu-msg{min-height:1.4em;margin:2px 0 0;font-weight:800;text-align:center;color:var(--deep,#2E1065)}

/* final */
.cu-fin{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-top:4px}
.cu-estrellas{margin:0;font-size:2.4rem;line-height:1;letter-spacing:4px;color:#D1D5DB}
.cu-estrellas .on{color:#F59E0B;text-shadow:0 2px 0 #B45309}
.cu-fin-tit{margin:0;font-size:1.2rem;font-weight:900;color:var(--deep,#2E1065)}
.cu-fin-det{margin:0;color:var(--text2,#6B7280);font-weight:700}
.cu-fin-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;width:100%}
.cu-bt{min-height:48px;min-width:120px;max-width:320px;padding:0 20px;border:0;border-radius:999px;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;
  background:var(--bg,#F1F0FF);color:var(--deep,#2E1065)}
.cu-bt.otra{background:var(--purple,#7C3AED);color:#fff}
.cu-bt[hidden]{display:none}

@keyframes cu-tiembla{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
@keyframes cu-lleno{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .cu-progreso i,.cu-op{transition:none}
  .cu-op.tiembla,.cu-hueco.lleno{animation:none}
}