/* Láminas y juegos de dibujos (motor/laminas.js). El centrado de las piezas usa la propiedad translate: así el brillo
   (que anima transform) no las mueve de su sitio. */

/* ---------- lámina ---------- */
.lamina{position:relative;width:100%;max-width:none;border-radius:28px;overflow:hidden;box-shadow:0 7px 0 rgba(0,0,0,.08)}
.lm-pz{position:absolute;translate:-50% -50%;line-height:1;z-index:2;cursor:pointer;filter:drop-shadow(0 6px 4px rgba(0,0,0,.18));transition:opacity .35s,scale .35s}
.lm-em.voltea{transform:scaleX(-1)}
.lm-num{font-family:var(--ui);font-weight:700;color:var(--nc);background:#fff;border-radius:.24em;padding:.04em .22em .08em;box-shadow:0 .06em 0 rgba(0,0,0,.14)}
.lm-pecera{border-radius:50%;border:6px solid rgba(255,255,255,.95);background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.55),rgba(120,200,255,.45) 60%);box-shadow:inset 0 -14px 0 rgba(0,90,160,.14);z-index:1;filter:none}
.lm-oculto{opacity:0;scale:.3}
.lm-lineas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.lm-linea{stroke:#22c55e;stroke-width:7;stroke-linecap:round;stroke-dasharray:8 10;filter:drop-shadow(0 2px 0 #fff)}

/* ---------- amigos del 10 ---------- */
.amigos{display:flex;gap:18px;align-items:center;justify-content:center;width:100%;background:#fff;border-radius:30px;padding:16px;box-shadow:0 7px 0 #e6dcc6}
.am-marco{width:340px;flex-shrink:0}
.am-chips{display:flex;flex-direction:column;gap:8px}
.am-chip{font-family:var(--ui);font-weight:700;font-size:40px;line-height:1.1;color:var(--suave);background:#f6f8ff;border-radius:18px;padding:6px 18px;border:3px solid transparent}
.am-chip.activo{background:#fff6d1;border-color:#ffc83d}

/* ---------- juego "toca" ---------- */
.j-toca,.j-clasificar,.j-memorama{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.6vh,24px);width:100%}
.tc-muestra{display:flex;justify-content:center;width:100%}
.tc-serie{display:flex;gap:clamp(6px,1.6vw,10px);flex-wrap:wrap;justify-content:center;max-width:640px}
.tc-ch{min-width:clamp(48px,12vw,72px);height:clamp(48px,12vw,72px);padding:0 4px;border-radius:16px;background:#fff;box-shadow:0 5px 0 #d5def0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,8vw,46px);line-height:1}
.tc-ch b{font-family:var(--ui);font-weight:700}
.tc-ch.hueco{border:4px dashed #9db7e6;color:#9db7e6;font-family:var(--ui);font-weight:700;animation:pulsa 1.3s ease-in-out infinite}
.tc-flash.oculto{visibility:hidden}
.tc-flash{transition:opacity .3s}
.tc-flash.se-va{opacity:0}
.tc-ops{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,22px);justify-content:center;align-items:center;width:100%;max-width:660px}
.tc-op{background:#fff;border-radius:28px;box-shadow:0 7px 0 #d5def0,0 10px 18px rgba(31,42,68,.08);padding:clamp(10px,2vw,16px);min-width:clamp(120px,38vw,280px);min-height:clamp(120px,19vh,280px);
  display:flex;align-items:center;justify-content:center;transition:opacity .25s,box-shadow .2s}
.tc-op:active{translate:0 4px;box-shadow:0 3px 0 #d5def0}
.tc-ops.n4 .tc-op{min-width:clamp(110px,40vw,190px)}
.tc-e{line-height:1;filter:drop-shadow(0 6px 4px rgba(0,0,0,.15))}
.tc-g{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:clamp(38px,11vw,72px);line-height:1.15;max-width:clamp(150px,40vw,340px)}
.tc-n{font-family:var(--ui);font-weight:700;font-size:clamp(4rem,18vw,7.5rem);line-height:1}
.tc-marco{width:clamp(130px,34vw,200px)}
.tc-op.bien{box-shadow:0 0 0 7px #22c55e,0 0 0 14px rgba(34,197,94,.25)}
.tc-op.apaga{opacity:.35;pointer-events:none}
.tc-op.mira{animation:mira .8s ease-in-out infinite}
.tc-escena{position:relative;width:min(94vw,620px);height:min(48vh,420px);border-radius:30px;overflow:hidden;max-width:none}
.tc-escena.tc-mini{width:min(90vw,560px);height:min(32vh,280px)}
.tc-ver .tc-g{max-width:none;flex-wrap:nowrap}
.tc-op.suelto{position:absolute;translate:-50% -50%;background:transparent;box-shadow:none;min-width:0;min-height:0;padding:6px;border-radius:22px;z-index:2}
.tc-op.suelto.bien{background:rgba(34,197,94,.18)}

/* ---------- juego "clasificar" ---------- */
.cl-actual{min-height:clamp(120px,20vh,180px);display:flex;align-items:center;justify-content:center}
.cl-item{font-size:clamp(84px,24vw,180px);line-height:1;filter:drop-shadow(0 8px 6px rgba(0,0,0,.18));display:inline-block}
.cl-cajas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,3vw,24px);width:100%;max-width:760px}
.cl-caja{min-height:clamp(170px,27vh,320px);border-radius:28px;background:rgba(255,255,255,.85);border:5px dashed #b6c6e3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px}
.cl-et{font-size:clamp(48px,13vw,72px);line-height:1}
.cl-dentro{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.cl-dentro .cl-item{font-size:clamp(30px,8vw,44px);filter:none}
.cl-caja.mira{animation:mira .8s ease-in-out infinite;border-color:#ffc83d}

/* ---------- juego "memorama" ---------- */
.mm-tablero{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,18px);width:min(94vw,760px)}
.mm-carta{aspect-ratio:3/4;border-radius:20px;position:relative;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.mm-dorso,.mm-cara{position:absolute;inset:0;border-radius:20px;display:flex;align-items:center;justify-content:center}
.mm-dorso{background:repeating-linear-gradient(45deg,#14b8a6 0 10px,#2ec4b6 10px 20px);color:#fff;font-family:var(--ui);font-weight:700;font-size:clamp(2rem,9vw,3rem)}
.mm-cara{display:none;background:#fff;flex-direction:column;gap:4px;padding:6px}
.mm-cara b{font-family:var(--ui);font-weight:700;font-size:clamp(2rem,9vw,3rem);line-height:1}
.mm-marco{width:92%;gap:2px!important;padding:3px!important;border-width:3px!important;border-radius:8px!important}
.mm-carta.vuelta .mm-cara{display:flex}
.mm-carta.vuelta .mm-dorso{display:none}
.mm-carta.vuelta{animation:voltea .3s ease-out}
@keyframes voltea{from{transform:rotateY(90deg)}}
.mm-carta.pareja{box-shadow:0 0 0 5px #22c55e,0 6px 0 rgba(0,0,0,.14)}
.tc-deco{position:absolute;translate:-50% -50%;z-index:1;pointer-events:none;line-height:1}
.tc-pecera{display:block;width:100%;height:100%;border-radius:50%;border:6px solid rgba(255,255,255,.95);background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.55),rgba(120,200,255,.45) 60%);box-shadow:inset 0 -14px 0 rgba(0,90,160,.14)}
.tc-deco .tc-pecera{width:100%;height:100%}
.tc-ver{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:28px;padding:12px 18px;box-shadow:0 7px 0 #d5def0}
.tc-nm{display:flex;flex-direction:column;align-items:center;gap:6px}
.tc-marco.chico{width:clamp(120px,34vw,240px)}
.tc-ver .tc-marco{width:clamp(200px,64vw,320px)}