/* criaturas-impostor.css — «🕵️ El Impostor de la Familia» (js/juegos/criaturas-impostor.js).
   Escritorio: cabecera con la familia y 4-5 criaturas en fila. Móvil (<700px): 2 columnas. */
.imp{margin:auto;inset:0;border:0;padding:0;border-radius:28px;width:min(1000px,calc(100vw - 16px));height:min(760px,calc(100dvh - 16px));
  max-height:calc(100dvh - 16px);overflow:hidden;background:#fff;color:var(--deep,#2E1065);box-shadow:0 24px 60px rgba(30,27,75,.35)}
.imp::backdrop{background:rgba(30,27,75,.6)}
.imp-in{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:12px;height:100%;padding:16px 16px 18px;box-sizing:border-box;
  background:linear-gradient(180deg,#F5F3FF 0%,#fff 45%);overflow:hidden}
.imp-in .lvl-confetti{z-index:5}
.imp-x{position:absolute;z-index:30;top:8px;right:8px;width:48px;height:48px;border-radius:50%;border:0;background:#F1F5F9;
  color:var(--deep,#2E1065);font-size:1.15rem;font-weight:900;cursor:pointer}
.imp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* cabecera: título, barra, familia y pregunta */
.imp-cab{min-width:0;display:flex;flex-direction:column;gap:8px}
.imp-tit{margin:0;padding-right:52px;font-size:clamp(1.1rem,4vw,1.45rem);font-weight:900;line-height:1.2}
.imp-barra{height:12px;border-radius:99px;background:#EDE9FE;overflow:hidden;margin-right:52px}
.imp-barra i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#A78BFA,#7C3AED);transition:width .35s ease}
.imp-fam{display:flex;align-items:center;gap:12px;padding:8px 14px;border:3px solid var(--c);border-radius:20px;background:var(--c2);
  box-shadow:0 4px 0 var(--c);min-width:0}
.imp-fam-ico{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.12);flex:none}
.imp-fam-ico img{width:78%;height:78%;object-fit:contain}
.imp-fam-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.imp-fam-txt b{font-size:1.15rem;font-weight:900;color:var(--c);filter:brightness(.8)}
.imp-fam-txt small{font-size:.95rem;font-weight:800;overflow-wrap:anywhere}
.imp-ronda{flex:none;padding:4px 10px;border-radius:99px;background:var(--c);color:#fff;font-weight:900;font-size:.9rem}
.imp-preg{margin:0;font-size:clamp(1rem,3.6vw,1.2rem);font-weight:800;text-align:center}

/* criaturas */
.imp-grid{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px;align-content:center;min-height:0;overflow-y:auto;
  padding:6px 4px 10px}
.imp-cri{--ci:#7C3AED;--ci2:#F5F3FF;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-width:0;min-height:48px;padding:10px 6px 12px;border:3px solid #E9D5FF;border-radius:22px;background:#fff;color:var(--deep,#2E1065);
  font:inherit;cursor:zoom-in;box-shadow:0 6px 16px rgba(46,16,101,.12);transition:transform .15s ease,box-shadow .15s ease,opacity .25s ease;
  -webkit-tap-highlight-color:transparent}
.imp-cri:hover{transform:translateY(-3px)}
.imp-cri:focus-visible,.imp-x:focus-visible,.imp-bt:focus-visible{outline:3px solid var(--purple,#7C3AED);outline-offset:3px}
.imp-fig{width:100%;height:clamp(80px,22dvh,170px);object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.imp-formas{font-size:clamp(.9rem,2.4vw,1.1rem);font-weight:800;text-align:center;line-height:1.3;overflow-wrap:anywhere}
.imp-fl{margin:0 .2em;color:#A78BFA}
.imp-hl{background:#FDE68A;color:inherit;border-radius:5px;padding:0 2px;box-shadow:inset 0 -3px 0 #F59E0B}
.imp-motivo{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.82rem;font-weight:800;line-height:1.25;text-align:center;
  padding:3px 8px;border-radius:12px}
.imp-motivo img{width:22px;height:22px;object-fit:contain}
.imp-motivo[hidden]{display:none}
/* tocada pero SÍ era de la familia */
.imp-cri.si{cursor:default;border-color:#86EFAC;background:#F0FDF4;box-shadow:none}
.imp-cri.si:hover{transform:none}
.imp-cri.si .imp-motivo{background:#DCFCE7;color:#166534}
.imp-cri.tiembla{animation:imp-no .45s ease}
/* impostora descubierta: se ilumina con SU color */
.imp-cri.impostora{cursor:default;border-color:var(--ci);background:var(--ci2);transform:scale(1.04);
  box-shadow:0 0 0 4px #fff,0 0 0 8px var(--ci),0 0 30px 6px var(--ci);animation:imp-brilla .7s ease}
.imp-cri.impostora .imp-motivo{background:var(--ci);color:#fff}
.imp-cri.impostora .imp-motivo img{background:#fff;border-radius:50%;padding:2px}
.imp-cri.apagada{opacity:.45;cursor:default}
.imp-cri.apagada:hover{transform:none}

/* pie: explicación + siguiente */
.imp-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:48px}
.imp-expl{flex:1 1 280px;max-width:620px;margin:0;padding:10px 14px;border-radius:18px;background:#FFF7ED;border:2px solid #FDBA74;
  font-size:.98rem;font-weight:700;line-height:1.35;text-align:center;animation:imp-pop .3s ease}
.imp-expl.ok{background:#fff;border-color:var(--ci,#7C3AED);box-shadow:0 0 0 3px color-mix(in srgb,var(--ci,#7C3AED) 25%,transparent)}
.imp-expl[hidden]{display:none}
.imp-bt[hidden]{display:none}

/* final */
.imp-fin{grid-row:1/-1;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:12px}
.imp-estrellas{display:flex;gap:6px;font-size:clamp(2.4rem,10vw,3.4rem);line-height:1}
.imp-est{color:#E5E7EB}
.imp-est.on{color:#F59E0B;animation:imp-pop .4s ease both}
.imp-est.on:nth-child(2){animation-delay:.12s}.imp-est.on:nth-child(3){animation-delay:.24s}
.imp-fin-txt,.imp-fin-rec{margin:0;font-weight:700}
.imp-fin-rec{color:#6B7280}
.imp-fin-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;width:100%}
.imp-bt{min-height:48px;min-width:140px;max-width:320px;flex:1 1 140px;padding:0 20px;border-radius:99px;border:2px solid #DDD6FE;background:#fff;
  color:var(--deep,#2E1065);font:inherit;font-weight:900;cursor:pointer}
.imp-pie .imp-bt{flex:0 1 200px}
.imp-bt-pri{background:var(--purple,#7C3AED);border-color:var(--purple,#7C3AED);color:#fff}

/* tablet estrecha: 3 columnas */
@media (max-width:899px){
  .imp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* móvil: 2 columnas, pantalla completa */
@media (max-width:699px){
  .imp{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0}
  .imp-in{padding:12px 12px 14px;gap:8px}
  .imp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
  .imp-grid .imp-cri:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 4px)}
  .imp-fam{padding:6px 10px;gap:8px}
  .imp-fam-ico{width:40px;height:40px}
  .imp-fam-txt b{font-size:1rem}
  .imp-fam-txt small{font-size:.85rem}
  .imp-fig{height:clamp(64px,14dvh,120px)}
  .imp-cri{padding:8px 4px 10px;border-radius:18px}
  .imp-expl{font-size:.9rem;padding:8px 10px}
  .imp-pie .imp-bt{flex:1 1 100%}
}
@media (max-width:360px){
  .imp-fam-ico{display:none}
  .imp-formas{font-size:.82rem}
}

@keyframes imp-no{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes imp-pop{0%{transform:scale(.6)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes imp-brilla{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1.04)}}

@media (prefers-reduced-motion:reduce){
  .imp-cri.tiembla,.imp-cri.impostora,.imp-expl,.imp-est.on{animation:none}
  .imp-cri,.imp-barra i{transition:none}
  .imp-cri:hover,.imp-cri.impostora{transform:none}
}