/* css/criaturas-cueva.css — 🔊 Eco de la Cueva (js/juegos/criaturas-cueva.js).
   Diálogo propio .cv-dlg oscuro · cueva con degradado, rocas y estalactitas · 8 antorchas (llama CSS)
   · siluetas sólidas del color de familia (--c / --c2 en cada .cv-op, máscara assets/irregulares/sil/).
   Sin scroll horizontal desde 320px; objetivos ≥48px; prefers-reduced-motion. */
.cv-dlg{margin:auto;padding:0;border:0;border-radius:24px;width:min(96vw,640px);max-width:96vw;max-height:94dvh;
  background:#14101F;color:#F5F3FF;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:auto;overscroll-behavior:contain}
.cv-dlg::backdrop{background:rgba(10,8,20,.7)}
.cv-in{position:relative;padding:14px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:radial-gradient(120% 70% at 50% 0,#2A2140 0,#14101F 70%)}
.cv-in .lvl-confetti{z-index:5}
.cv-x{position:absolute;top:8px;right:8px;z-index:30;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.15rem;font-weight:800;cursor:pointer}
.cv-x:focus-visible,.cv-bt:focus-visible,.cv-oir:focus-visible{outline:3px solid #FBBF24;outline-offset:3px}
.cv-tit{margin:4px 52px 0;font-size:clamp(1.2rem,4.8vw,1.55rem);font-weight:900;text-align:center;color:#FDE68A}
.cv-sub{margin:0;font-size:.95rem;color:#C4B5FD;text-align:center}

/* ── antorchas (una por ronda) ── */
.cv-antorchas{display:flex;justify-content:center;gap:clamp(4px,2vw,12px);width:100%;flex-wrap:nowrap}
.cv-antorcha{position:relative;flex:0 1 30px;min-width:22px;height:48px;display:flex;justify-content:center}
.cv-antorcha b{position:absolute;bottom:0;left:50%;width:7px;height:24px;margin-left:-3.5px;border-radius:2px 2px 4px 4px;
  background:linear-gradient(90deg,#5B3A22,#8B5E3C 50%,#5B3A22)}
.cv-antorcha b::before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;height:7px;border-radius:3px;background:#3F3F46}
.cv-antorcha.actual b::before{background:#A1A1AA;box-shadow:0 0 6px rgba(251,191,36,.6)}
.cv-llama{position:absolute;bottom:26px;left:50%;width:18px;height:24px;margin-left:-9px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#FFF7D6 0,#FDE047 28%,#F97316 62%,rgba(220,38,38,.2) 82%,transparent 90%);
  transform-origin:50% 100%;transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.3,.7,.3,1.5),opacity .3s}
.cv-antorcha.on .cv-llama{transform:scale(1);opacity:1;filter:drop-shadow(0 0 8px rgba(251,146,60,.9));animation:cv-parpadeo 1.1s ease-in-out infinite alternate}
.cv-antorcha.debil .cv-llama{transform:scale(.55);opacity:.7;filter:drop-shadow(0 0 3px rgba(251,146,60,.6))}

/* ── la cueva ── */
.cv-cueva{position:relative;width:100%;min-height:260px;padding:44px 8px 16px;border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:
    radial-gradient(60% 50% at 50% 55%,rgba(76,61,110,.45),transparent 70%),
    radial-gradient(35% 22% at 12% 100%,#2B2438 0 60%,transparent 62%),
    radial-gradient(40% 26% at 90% 100%,#2B2438 0 60%,transparent 62%),
    linear-gradient(180deg,#0B0913 0,#1C1729 55%,#262033 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.8);transition:background .8s}
/* estalactitas */
.cv-cueva::before{content:"";position:absolute;top:0;left:0;right:0;height:34px;background:#0B0913;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 30%,96% 55%,92% 25%,86% 80%,80% 30%,73% 50%,66% 20%,58% 100%,52% 30%,45% 60%,38% 25%,30% 85%,24% 30%,17% 55%,10% 20%,5% 70%,0 35%)}
.cv-cueva.iluminada{background:
    radial-gradient(70% 60% at 50% 45%,rgba(251,191,36,.28),transparent 70%),
    linear-gradient(180deg,#1E1830 0,#3A2E4F 60%,#4A3B5F 100%)}
.cv-roca{position:absolute;pointer-events:none;background:#2F2840;border-radius:46% 54% 40% 60%/60% 55% 45% 40%;box-shadow:inset -6px -6px 0 rgba(0,0,0,.25)}
.cv-roca.r1{left:-18px;bottom:-14px;width:90px;height:60px}
.cv-roca.r2{right:-12px;bottom:-18px;width:110px;height:70px;background:#282236}
.cv-roca.r3{right:18%;top:40%;width:26px;height:18px;opacity:.6}
.cv-ronda{position:relative;z-index:1;margin:0;font-size:.9rem;font-weight:800;color:#A78BFA;letter-spacing:.02em}
.cv-cueva.resuena .cv-ronda{animation:cv-onda .9s ease-out}

/* siluetas */
.cv-ops{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2.5vw,16px);width:100%;max-width:520px}
.cv-op{position:relative;min-width:48px;min-height:48px;aspect-ratio:3/4;padding:6px;border:2px solid rgba(255,255,255,.08);border-radius:18px;
  background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.06),transparent 70%);cursor:pointer;font:inherit;color:inherit;
  -webkit-tap-highlight-color:transparent;transition:transform .15s,opacity .4s,border-color .2s}
.cv-op:focus-visible{outline:3px solid var(--c2);outline-offset:3px}
@media (hover:hover){.cv-op:not(:disabled):hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-2px)}}
.cv-op:disabled{cursor:default}
.cv-fig{position:absolute;inset:6px}
.cv-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .5s}
.cv-sil{position:absolute;inset:0;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 45%,#0B0913));
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center bottom;mask-position:center bottom;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 70%,transparent));transition:opacity .5s}
.cv-op.mal{opacity:.35;animation:cv-tiembla .4s ease-in-out}
.cv-op.apaga{opacity:.15}
.cv-op.ok{border-color:var(--c);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c2) 55%,transparent),transparent 72%)}
.cv-op.ok .cv-fig img{opacity:1}
.cv-op.ok .cv-sil{opacity:0}
.cv-op.ok .cv-fig{animation:cv-sale 1.6s .5s ease-in forwards}
.cv-palabra{position:relative;z-index:1;min-height:1.4em;margin:0;font-size:clamp(1.05rem,4.6vw,1.35rem);font-weight:900;color:#FDE68A;text-align:center;overflow-wrap:anywhere}

/* fallo: gotita que cae + bocadillo «¿…?» */
.cv-gota{position:absolute;top:26px;left:58%;width:10px;height:14px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;
  background:linear-gradient(180deg,#BAE6FD,#38BDF8);opacity:0;pointer-events:none;z-index:2}
.cv-cueva.falla .cv-gota{animation:cv-gota .9s ease-in forwards}
.cv-bocadillo{position:absolute;top:40px;left:14%;z-index:2;padding:4px 12px;border-radius:14px;background:rgba(255,255,255,.12);
  color:#E9D5FF;font-size:1.3rem;font-weight:900;opacity:0;pointer-events:none}
.cv-cueva.falla .cv-bocadillo{animation:cv-eco 1.4s ease-out forwards}

/* botón grande de escuchar */
.cv-oir{min-height:56px;width:100%;max-width:320px;padding:0 22px;border:0;border-radius:999px;font:inherit;font-size:1.1rem;font-weight:900;cursor:pointer;
  background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#3B1D00;box-shadow:0 4px 0 #B45309}
.cv-oir:active{transform:translateY(2px);box-shadow:0 2px 0 #B45309}
.cv-oir.late{animation:cv-late 1s ease-in-out 3}

.cv-msg{min-height:1.4em;margin:0;font-weight:800;text-align:center;color:#E9D5FF}

.cv-fin{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.cv-estrellas{margin:0;font-size:2.4rem;line-height:1;letter-spacing:4px;color:#4B4560}
.cv-estrellas .on{color:#FBBF24;text-shadow:0 0 10px rgba(251,191,36,.6)}
.cv-fin-tit{margin:0;font-size:1.2rem;font-weight:900;color:#FDE68A}
.cv-fin-det{margin:0;color:#C4B5FD;font-weight:700}
.cv-fin-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;width:100%}
.cv-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:rgba(255,255,255,.14);color:#F5F3FF}
.cv-bt.otra{background:#FBBF24;color:#3B1D00}

@media (max-width:359px){
  .cv-in{padding:12px 8px 14px}
  .cv-cueva{min-height:220px;padding-top:40px}
  .cv-op{padding:4px;border-radius:14px}
  .cv-fig{inset:4px}
}

@keyframes cv-parpadeo{0%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08,.94) rotate(2deg)}100%{transform:scale(.95,1.06) rotate(-1deg)}}
@keyframes cv-onda{0%{text-shadow:0 0 0 rgba(167,139,250,.8)}100%{text-shadow:0 0 18px rgba(167,139,250,0)}}
@keyframes cv-tiembla{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes cv-sale{0%{transform:none;opacity:1}30%{transform:scale(1.1)}100%{transform:translateY(-120%) scale(.7);opacity:0}}
@keyframes cv-gota{0%{opacity:0;transform:translateY(0)}10%{opacity:1}85%{opacity:1;transform:translateY(190px)}100%{opacity:0;transform:translateY(200px) scaleX(1.8)}}
@keyframes cv-eco{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1)}60%{opacity:.6;transform:scale(1.15)}100%{opacity:0;transform:scale(1.3)}}
@keyframes cv-late{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 4px 0 #B45309,0 0 0 6px rgba(251,191,36,.35)}}

@media (prefers-reduced-motion:reduce){
  .cv-llama,.cv-fig img,.cv-sil,.cv-op{transition:none}
  .cv-antorcha.on .cv-llama,.cv-cueva.resuena .cv-ronda,.cv-op.mal,.cv-op.ok .cv-fig,.cv-oir.late{animation:none}
  .cv-cueva.falla .cv-gota{animation:none}
  .cv-cueva.falla .cv-bocadillo{animation:none;opacity:1}
}