/* ===== Ludoteca y Puerto de los contrabandistas =====
   Solo clases nuevas; colores y componentes son los del juego (estilo.css):
   .btn, .chip, .tarjeta, .overlay, --indigo, --coral, --estrella, --correcto, --incorrecto… */

/* ---------- Ludoteca ---------- */
.ludo-tarjeta { display: flex; flex-direction: column; gap: 10px; }
.ludo-portada {
  position: relative; height: 150px; margin: -16px -18px 4px; border-radius: 20px 20px 0 0;
  background: #1a2845 center 62% / cover no-repeat; overflow: hidden;
}
.ludo-portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,40,69,0) 55%, rgba(26,40,69,.35)); }
.ludo-portada-fantasma { position: absolute; right: 8px; top: 6px; width: 104px; height: 136px; z-index: 1; }
.ludo-niveles { display: flex; flex-wrap: wrap; gap: 6px; }
.ludo-nivel { flex-direction: column; gap: 0; padding: 6px 10px; border: none; cursor: pointer; font-family: inherit; line-height: 1.15; min-width: 58px; }
.ludo-nivel.activo { background: var(--coral); transform: scale(1.06); }
.ludo-nivel:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Puerto: estructura ---------- */
.cb-encabezado { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.cb-encabezado h1 { flex: 1; text-align: center; font-size: 1.02em; margin: 0; line-height: 1.15; }
.cb-hueco-config { width: 46px; display: flex; justify-content: flex-end; }
.cb-barra { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 10px 8px; position: relative; z-index: 4; }
.cb-barra .chip { font-size: .8em; padding: 4px 10px; }
.cb-barra .chip svg { margin-right: 2px; }
.cb-bolsillo.cb-negativo { background: var(--incorrecto); }

/* ---------- Escena del muelle ---------- */
.cb-escena {
  position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 16 / 9.6; max-height: 34vh;
  background: #1a2845 url(../assets/images/ludoteca/muelle.jpg) center 60% / cover no-repeat;
  overflow: hidden; box-shadow: inset 0 -12px 18px rgba(0,0,0,.25);
}
.cb-estrellas {
  position: absolute; inset: 0 0 50% 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff5e1 50%, transparent 51%),
    radial-gradient(2px 2px at 38% 9%, #ffd84a 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 22%, #fff5e1 50%, transparent 51%),
    radial-gradient(2px 2px at 82% 12%, #ffd84a 50%, transparent 51%);
  animation: estrellas-titilar 2.6s ease-in-out infinite;
}
.cb-bascula { position: absolute; left: 17%; right: 9%; bottom: 3%; height: 74%; z-index: 2; }
.cb-coach { position: absolute; left: 0; bottom: 0; width: 20%; height: 56%; z-index: 3; }
.cb-fantasma { position: absolute; right: 0; top: 2%; width: 26%; height: 66%; z-index: 4; }
.cb-globo {
  position: absolute; right: 25%; top: 6%; max-width: 52%; z-index: 5;
  background: #fffdf6; color: #0e1b26; border: 3px solid #26476B; border-radius: 16px;
  padding: 6px 10px; font-size: .78em; font-weight: 700; line-height: 1.25;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.cb-globo::after {
  content: ""; position: absolute; right: -10px; top: 14px; border: 8px solid transparent; border-left-color: #26476B;
}

/* ---------- Pestañas, panel y pie ---------- */
.cb-pestanas { display: flex; gap: 6px; justify-content: center; padding: 8px 10px 4px; position: relative; z-index: 3; }
.cb-pestanas .chip { border: none; cursor: pointer; font-family: inherit; font-size: .85em; }
.cb-pestanas .chip.activo { background: var(--coral); }
.cb-panel { padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.cb-panel .tarjeta { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cb-pie { padding: 6px 12px 12px; display: flex; flex-direction: column; position: relative; z-index: 3; }
.cb-pie .btn { font-size: 1em; }
.cb-ayuda { font-size: .78em; opacity: .7; line-height: 1.3; }
.cb-fila-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9em; }
.cb-fila-titulo > span:first-of-type { opacity: .7; font-size: .9em; }

/* ---------- Muelle (cajas para poner en la báscula) ---------- */
.cb-destino { display: inline-flex; gap: 4px; }
.cb-destino .chip, .cb-modos .chip { border: none; cursor: pointer; font-family: inherit; font-size: .8em; padding: 5px 10px; background: rgba(16,16,20,.55); }
.cb-destino .chip.activo, .cb-modos .chip.activo { background: var(--indigo); transform: scale(1.05); }
.cb-cajas { display: flex; flex-direction: column; gap: 6px; }
.cb-fila-mercancia { display: flex; align-items: center; gap: 8px; }
.cb-busto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #eee; flex-shrink: 0; }
.cb-nombre { flex: 1; display: flex; flex-direction: column; font-size: .86em; line-height: 1.15; min-width: 0; }
.cb-nombre span { font-size: .8em; opacity: .65; }
.cb-pila-muelle { display: flex; gap: 2px; }
.cb-caja {
  width: 42px; height: 42px; padding: 0; border: none; background: none; cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), opacity .15s;
}
.cb-caja svg { width: 100%; height: 100%; }
.cb-caja:hover:not(:disabled) { transform: translateY(-3px) scale(1.06); }
.cb-caja:active:not(:disabled) { transform: translateY(2px) scale(.95); }
.cb-caja:disabled { opacity: .22; cursor: default; filter: grayscale(.6); }
.cb-vaciar { align-self: flex-start; }

/* ---------- Soborno ---------- */
.cb-modos { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-precio { font-size: .85em; opacity: .9; }
.cb-desc { font-size: .8em; opacity: .75; }
.cb-vista { background: #f4efe2; border-radius: 12px; padding: 6px 8px; }
.cb-expr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 26px; }
.cb-term { display: inline-flex; align-items: center; gap: 1px; }
.cb-term b { font-size: .85em; }
.cb-op { font-weight: 800; padding: 0 4px; opacity: .75; }
.cb-vacio { font-size: .8em; opacity: .6; }
.cb-cuentan { font-size: .75em; opacity: .65; }
.cb-motivo { font-size: .8em; font-weight: 700; color: var(--incorrecto); min-height: 1em; }

/* ---------- Historial y libreta ---------- */
.cb-hist-item { display: flex; gap: 8px; align-items: flex-start; border-top: 1px dashed rgba(0,0,0,.12); padding-top: 6px; }
.cb-hist-n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #26476B; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .78em; font-weight: 800;
}
.cb-hist-tit { font-size: .75em; opacity: .65; font-weight: 700; }
.cb-hist-res { font-size: .88em; font-weight: 800; color: #26476B; }
.cb-lib-fila { display: flex; align-items: center; gap: 6px; }
.cb-lib-nums { display: flex; flex-wrap: wrap; gap: 3px; }
.cb-num {
  width: 27px; height: 27px; border-radius: 8px; border: 2px solid rgba(0,0,0,.15); background: #fff;
  font: 700 .85em "Montserrat", sans-serif; cursor: pointer; padding: 0;
}
.cb-num.tachado { background: #e9e4d8; color: rgba(0,0,0,.3); text-decoration: line-through; text-decoration-thickness: 2px; }
.cb-notas { width: 100%; min-height: 70px; border-radius: 12px; border: 2px solid rgba(0,0,0,.12); padding: 8px; font: inherit; font-size: .85em; resize: vertical; box-sizing: border-box; }

/* ---------- Hoja de respuesta ---------- */
.cb-hoja { max-height: 86% !important; width: 90% !important; }
.cb-hoja-scroll { display: flex; flex-direction: column; gap: 8px; }
.cb-hoja-sec { margin-top: 4px; }
.cb-exacta { display: flex; align-items: center; gap: 8px; }
.cb-nombre-h { flex: 1; font-weight: 700; font-size: .9em; }
.cb-exacta select, .cb-sospecha select {
  font: 700 .9em "Montserrat", sans-serif; border-radius: 10px; border: 2px solid rgba(0,0,0,.18); padding: 5px 6px; background: #fff;
}
.cb-propia { font-size: .82em; font-weight: 700; opacity: .7; }
.cb-sospecha { background: #f4efe2; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cb-sos-cab { display: flex; gap: 6px; align-items: center; }
.cb-sos-cab select { flex: 1; min-width: 0; font-size: .8em; }
.cb-quitar { border: none; background: var(--incorrecto); color: #fff; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-weight: 800; }
.cb-sos-huecos { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-sos-huecos select { font-size: .8em; }
.cb-sos-lectura { font-size: .82em; font-style: italic; }
.cb-sos-error { font-size: .78em; font-weight: 700; color: var(--incorrecto); }
.cb-hoja-botones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Reparto y revelación ---------- */
.cb-reparto-yo { display: flex; align-items: center; gap: 10px; font-size: .92em; line-height: 1.35; }
.cb-reparto-num { font-family: "BubblegumSans", cursive; font-size: 1.8em; color: var(--coral); vertical-align: -0.15em; }
.cb-rev-filas { display: flex; flex-direction: column; gap: 4px; }
.cb-rev-fila { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 12px; background: #f4efe2; }
.cb-rev-fila.acierto { background: color-mix(in srgb, var(--correcto) 16%, white); }
.cb-rev-fila.error { background: color-mix(in srgb, var(--incorrecto) 14%, white); }
.cb-rev-caja { width: 40px; height: 40px; flex-shrink: 0; }
.cb-rev-nombre { flex: 1; display: flex; flex-direction: column; font-size: .86em; line-height: 1.15; }
.cb-rev-nombre span { font-size: .8em; opacity: .65; }
.cb-rev-real { font-family: "BubblegumSans", cursive; font-size: 1.7em; color: #26476B; }
.cb-rev-marca { width: 22px; text-align: center; font-weight: 900; font-size: 1.1em; }
.cb-rev-fila.acierto .cb-rev-marca { color: var(--correcto); }
.cb-rev-fila.error .cb-rev-marca { color: var(--incorrecto); }
.cb-rev-sospechas { display: flex; flex-direction: column; gap: 3px; font-size: .82em; }
.cb-rev-sospechas .acierto { color: var(--correcto); }
.cb-rev-sospechas .error { color: var(--incorrecto); }
.cb-rev-cuentas { display: flex; flex-direction: column; gap: 3px; font-size: .86em; border-top: 2px dashed rgba(0,0,0,.12); padding-top: 6px; }
.cb-rev-cuentas > div { display: flex; justify-content: space-between; gap: 8px; }
.cb-rev-total { font-size: 1.15em; font-weight: 800; }
.cb-rev-premio { font-weight: 800; color: #8a5a00; justify-content: center !important; }
.cb-rev-botones { display: flex; flex-direction: column; gap: 8px; }
.cb-explicacion { max-height: 46vh; white-space: pre-line; font-size: .9em; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .cb-estrellas { animation: none; }
  .cb-caja, .ludo-nivel { transition: none; }
}

/* `hidden` debe ganarle a los display:flex de arriba (pestañas y pie durante el reparto y la revelación). */
.cb-pantalla [hidden] { display: none !important; }

/* ---------- Desafío de los Frijoles ---------- */
.fr-escena {
  position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 16 / 11.5; max-height: 44vh;
  background: #8fc4e8 url(../assets/images/ludoteca/finca.jpg) center 62% / cover no-repeat;
  overflow: hidden; box-shadow: inset 0 -12px 18px rgba(0,0,0,.2);
}
.fr-coach { position: absolute; left: 1%; top: 6%; width: 24%; height: 50%; z-index: 2; }
.fr-madre { position: absolute; right: 1%; top: 2%; width: 30%; height: 58%; z-index: 2; }
.fr-globo { right: 31%; top: 5%; border-color: #336B3D; }
.fr-globo::after { border-left-color: #336B3D; }
.fr-tarros { position: absolute; left: 2%; right: 2%; bottom: 2%; height: 46%; display: flex; justify-content: space-around; align-items: flex-end; z-index: 3; }
.fr-tarro {
  position: relative; width: 31%; height: 100%; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.fr-tarro .fr-svg { width: 100%; flex: 1; min-height: 0; }
.fr-tarro .fr-svg svg { width: 100%; height: 100%; }
.fr-tarro:hover:not(:disabled) { transform: translateY(-3px); }
.fr-tarro:disabled { cursor: default; }
.fr-tarro.fr-elegido { transform: translateY(-6px) scale(1.04); }
.fr-tarro.fr-elegido .fr-svg { filter: drop-shadow(0 0 8px #ffd84a); }
.fr-tarro.fr-rival .fr-svg { filter: drop-shadow(0 0 8px #ff9106); }
.fr-cuenta { position: absolute; top: -2px; font-size: .78em; padding: 2px 9px; }
.fr-tarro.fr-elegido .fr-cuenta { background: var(--coral); }
.fr-estado { gap: 8px; }
.fr-mensaje { font-weight: 800; font-size: .95em; min-height: 1.3em; }
.fr-terminar { font-size: 1em; }
.tarro-svg .frijol.marcado { filter: drop-shadow(0 0 4px #ffd84a); }

/* 4 tarros (niveles 7 a 10) */
.fr-tarros[data-n="4"] .fr-tarro { width: 24%; }
.fr-eleccion { display: flex; flex-direction: column; gap: 6px; background: #f4efe2; border-radius: 12px; padding: 8px 10px; }

/* ---------- Victoria del nivel 10 ---------- */
.fr-leyenda {
  position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255,216,74,.55), rgba(30,40,20,.92) 70%);
  animation: fr-aparecer .4s ease-out;
}
.fr-leyenda-rayos {
  position: absolute; width: 220%; aspect-ratio: 1; left: -60%; top: -45%;
  background: repeating-conic-gradient(from 0deg, rgba(255,216,74,.35) 0deg 10deg, rgba(255,216,74,0) 10deg 20deg);
  animation: fr-girar 9s linear infinite;
}
.fr-leyenda-contenido { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; }
.fr-leyenda-titulo { font-size: 2.3em; line-height: 1; animation: fr-latir 1.1s ease-in-out infinite; }
.fr-leyenda-oro { width: 130px; height: 110px; animation: fr-caer 1.1s cubic-bezier(.34,1.56,.64,1) both, fr-flotar 2.4s ease-in-out 1.1s infinite; filter: drop-shadow(0 0 18px #ffd84a); }
.fr-leyenda-oro svg { width: 100%; height: 100%; }
.fr-leyenda-personajes { display: flex; gap: 6px; height: 200px; }
.fr-leyenda-coach, .fr-leyenda-madre { width: 150px; height: 100%; }
.fr-leyenda-texto { font-size: 1.05em; font-weight: 800; max-width: 320px; }
@keyframes fr-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes fr-girar { to { transform: rotate(360deg); } }
@keyframes fr-latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fr-caer { 0% { transform: translateY(-260px) rotate(-40deg) scale(.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); } }
@keyframes fr-flotar { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .fr-leyenda-rayos, .fr-leyenda-titulo, .fr-leyenda-oro { animation: none; }
}


/* ---------- El Salto de las Ranas ---------- */
.rn-escena {
  position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 16 / 10.5; max-height: 40vh;
  background: #2a8a7a url(../assets/images/ludoteca/quebrada.jpg) center 55% / cover no-repeat; overflow: hidden;
}
.rn-coach { position: absolute; left: 1%; top: 2%; width: 22%; height: 52%; z-index: 2; }
.rn-globo { left: 23%; right: auto; top: 6%; border-color: #2E7D5B; }
.rn-globo::after { right: auto; left: -10px; border-left-color: transparent; border-right-color: #2E7D5B; }
.rn-tablero { position: absolute; left: 1%; right: 1%; bottom: 12%; height: 40%; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end; z-index: 3; }
.rn-casilla { position: relative; height: 100%; padding: 0; border: none; background: none; cursor: default; }
.rn-casilla .piedra-svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.rn-rana { position: absolute; left: -4%; right: -4%; bottom: 14%; display: block; }
.rn-rana .rana-svg { width: 100%; display: block; overflow: visible; }
.rn-casilla.puede { cursor: pointer; }
.rn-casilla.puede .rn-rana { animation: rn-brillo 1.2s ease-in-out infinite; }
.rn-casilla.puede:hover .rn-rana { transform: translateY(-4px); }
@keyframes rn-brillo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,216,74,0)); } 50% { filter: drop-shadow(0 0 7px #ffd84a); } }
.rn-mini { display: inline-block; width: 22px; height: 18px; vertical-align: middle; }
.rn-mini svg { width: 100%; height: 100%; }
.rn-contadores { display: flex; gap: 10px; justify-content: space-around; }
.rn-contador { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rn-icono { width: 64px; height: 50px; }
.rn-icono svg { width: 100%; height: 100%; }
.rn-nombre { font-weight: 800; font-size: .85em; }
.rn-botones { display: flex; align-items: center; gap: 8px; }
.rn-botones .btn { width: 40px; padding: 6px 0; }
.rn-num { font-family: "BubblegumSans", cursive; font-size: 1.6em; min-width: 22px; text-align: center; }
.rn-mejor { font-size: .82em; font-weight: 700; color: #2E7D5B; }
.rn-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.ludo-ranas { position: absolute; left: 6%; right: 6%; bottom: 10%; display: grid; grid-template-columns: repeat(5, 1fr); z-index: 1; }
.ludo-ranas span { position: relative; height: 70px; }
.ludo-ranas .piedra-svg { position: absolute; bottom: 0; left: 0; width: 100%; }
.ludo-ranas .rana-svg { position: absolute; bottom: 14px; left: 0; width: 100%; }
@media (prefers-reduced-motion: reduce) { .rn-casilla.puede .rn-rana { animation: none; } }