/* v2.53 · EL MARCO COMÚN de las salas de Tilo y Lumi (SALAS-MARCO-COMUN-PASO0.md): la portada con el arte, el título en Baloo 2 y
   «Jugar · Niveles · Volver»; el mapa de los 5 niveles con estrellas. Sin scroll en 360, 390 y acostado; lo que se toca, 48 px o más. */

/* ── La portada ── */
body.cl-en-menu .sj-casa { display: none !important; }
.cl-portada { justify-content: flex-end; padding: calc(12px + env(safe-area-inset-top, 0px)) 18px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
.cl-arte { position: fixed; inset: 0; z-index: -1; display: block; }
.cl-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.cl-portada::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(10,8,24,.45) 56%, rgba(10,8,24,.9) 100%); }
.cl-arte-tenue::after { content: ""; position: absolute; inset: 0; background: rgba(10,8,24,.62); }
.cl-portada .cl-marca { width: 100%; max-width: 560px; }
.cl-portada .cl-nombre, .cl-jugar, .cl-mapa-cab h2, .cl-nv .num { font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important; }
.cl-portada .cl-nombre { font-size: clamp(40px, min(9vh, 13vw), 76px); color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 24px rgba(0,0,0,.35); }
.cl-menu { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; }
.cl-jugar { min-height: 68px; border: 0; border-radius: 22px; background: var(--cl-acento); color: var(--cl-tinta); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--cl-titulo); font-size: 30px; font-weight: 800; box-shadow: 0 6px 0 var(--cl-acento-sombra); transition: transform .12s ease; }
.cl-jugar small { font-family: "Nunito", system-ui, sans-serif; font-size: 18px; font-weight: 800; background: rgba(43,33,64,.14); border-radius: 999px; padding: 2px 12px; }
.cl-jugar small:empty { display: none; }
.cl-jugar:active, .cl-b2:active { transform: translateY(3px); }
.cl-menu-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-b2 { min-height: 56px; border-radius: 18px; border: 2px solid rgba(255,255,255,.5); background: rgba(10,8,24,.72); color: #fff; font-size: 21px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cl-iconos { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 3; display: flex; gap: 8px; }
.cl-ico { width: 52px; height: 52px; border-radius: 16px; border: 2px solid rgba(255,255,255,.45); background: rgba(10,8,24,.42); color: #fff; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cl-ico svg { width: 26px; height: 26px; }
.cl-portada .cl-nota { color: #fff; background: rgba(10,8,24,.62); border-radius: 12px; padding: 4px 10px; font-size: 16px; opacity: 1; }
.cl-op-act { min-height: 60px; background: rgba(255,255,255,.92); color: var(--cl-tinta); border-color: #fff; }
/* acostado: el título y el menú a la derecha, el dibujo a la vista */
@media (orientation: landscape) and (max-height: 560px) {
  .cl-portada { flex-direction: column; align-items: flex-end; justify-content: flex-end; padding: 10px 18px 12px 18px; gap: 8px; }
  .cl-portada .cl-marca, .cl-menu { max-width: 380px; text-align: center; }
  .cl-portada .cl-marca { flex: 0 0 auto; }
  .cl-portada .cl-nombre { font-size: clamp(32px, 11vh, 52px); }
  .cl-jugar { min-height: 58px; font-size: 26px; }
  .cl-b2 { min-height: 50px; font-size: 19px; }
  .cl-portada::before { background: linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(10,8,24,.55) 62%, rgba(10,8,24,.85) 100%); }
}
@media (min-width: 901px) and (orientation: landscape) and (min-height: 561px) {
  .cl-portada { align-items: flex-end; padding-right: 6vw; padding-bottom: 7vh; }
  .cl-portada::before { background: linear-gradient(90deg, rgba(0,0,0,0) 45%, rgba(10,8,24,.5) 65%, rgba(10,8,24,.8) 100%); }
  .cl-portada .cl-marca, .cl-menu { max-width: 420px; }
}

/* ── El mapa de los niveles ── */
.cl-mapa { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; box-sizing: border-box;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
.cl-mapa-cab { display: flex; align-items: center; gap: 10px; }
.cl-mapa-cab h2 { flex: 1; margin: 0; font-family: var(--cl-titulo); font-size: clamp(24px, 4.2vh, 32px); line-height: 1.1; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cl-mapa-total { font-weight: 800; font-size: 18px; white-space: nowrap; background: rgba(10,8,24,.5); border-radius: 999px; padding: 4px 12px; }
.cl-camino { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column-reverse; justify-content: space-evenly; gap: 6px; }
.cl-camino li { display: flex; }
.cl-camino li:nth-child(odd) { justify-content: flex-start; padding-left: 8%; }
.cl-camino li:nth-child(even) { justify-content: flex-end; padding-right: 8%; }
.cl-nv { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; min-width: min(78%, 300px); padding: 6px 16px 6px 8px; border-radius: 999px;
  border: 3px solid rgba(255,255,255,.55); background: rgba(10,8,24,.55); color: #fff; cursor: pointer; text-align: left; font: inherit;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.cl-nv .num { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--cl-tinta); font-family: var(--cl-titulo); font-size: 28px; font-weight: 800; }
.cl-nv .txt { display: flex; flex-direction: column; line-height: 1.1; }
.cl-nv .txt b { font-size: 20px; }
.cl-nv .est { font-size: 22px; letter-spacing: 2px; color: #ffd84a; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.cl-nv .est i { font-style: normal; color: rgba(255,255,255,.35); }
.cl-nv.hecho .num { background: var(--cl-acento); }
.cl-nv.siguiente { border-color: var(--cl-acento); background: rgba(245,197,66,.25); animation: cl-latir 1.6s ease-in-out infinite; }
.cl-nv.cerrado { opacity: .55; cursor: not-allowed; box-shadow: none; }
.cl-nv.cerrado .num { background: rgba(255,255,255,.35); }
.cl-nv .aca { position: absolute; top: -14px; right: 14px; background: var(--cl-acento); color: var(--cl-tinta); border-radius: 999px; padding: 1px 10px; font-size: 16px; font-weight: 800; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
@keyframes cl-latir { 50% { transform: scale(1.03); } }
.cl-calma .cl-nv.siguiente { animation: none; }
@media (prefers-reduced-motion: reduce) { .cl-nv.siguiente { animation: none; } }
.cl-mapa-pie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cl-chip { position: relative; min-height: 48px; border-radius: 999px; border: 2px solid rgba(255,255,255,.45); background: rgba(10,8,24,.55); color: #fff; padding: 4px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: none; }
.cl-chip .cl-op-t { font-size: 18px; font-weight: 800; }
.cl-chip .cl-racha { top: -12px; right: -6px; font-size: 15px; padding: 1px 8px; }
.cl-chip.cl-op-dia { background: rgba(245,197,66,.9); color: var(--cl-tinta); border-color: var(--cl-acento); }
.cl-chip.cl-op-dia.hecho { background: rgba(10,8,24,.55); color: #fff; }
.cl-mapa-pie .cl-racha-linea { flex-basis: 100%; margin: 0; text-align: center; font-size: 16px; opacity: .85; }
@media (orientation: landscape) and (max-height: 560px) {
  .cl-mapa { padding-left: 14px; padding-right: 14px; }
  .cl-camino { flex-direction: row; align-items: center; justify-content: space-evenly; flex-wrap: nowrap; }
  .cl-camino li, .cl-camino li:nth-child(odd), .cl-camino li:nth-child(even) { padding: 0; justify-content: center; flex: 1 1 0; }
  .cl-camino li:nth-child(even) { margin-top: 12vh; }
  .cl-nv { flex-direction: column; min-width: 0; width: 100%; max-width: 150px; border-radius: 22px; padding: 8px 6px; gap: 4px; text-align: center; }
  .cl-nv .txt { align-items: center; }
  .cl-nv .txt b { display: none; }
  .cl-nv .aca { top: -12px; right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14px; }
  .cl-mapa-pie .cl-racha-linea { display: none; }
}
@media (min-width: 901px) and (orientation: landscape) and (min-height: 561px) {
  .cl-camino { flex-direction: row; align-items: center; justify-content: center; gap: 2vw; }
  .cl-camino li, .cl-camino li:nth-child(odd), .cl-camino li:nth-child(even) { padding: 0; }
  .cl-camino li:nth-child(even) { margin-top: 18vh; }
  .cl-nv { flex-direction: column; min-width: 150px; border-radius: 26px; padding: 14px 12px; text-align: center; }
  .cl-nv .txt { align-items: center; }
  .cl-nv .aca { right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }
}
/* el final: «Siguiente nivel» manda */
.cl-fin-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-fin-bs > :is(#fSig, #fCompartir):not([hidden]) { grid-column: 1 / -1; }
.cl-fin-bs > #fOtra:only-of-type { grid-column: 1 / -1; }
/* v2.53 · En el teléfono: el título del mapa en un renglón (el total abajo), y el nombre largo sin dejar «El» solo */
@media (max-width: 480px) {
  .cl-mapa-cab { flex-wrap: wrap; }
  .cl-mapa-cab h2 { font-size: 24px; white-space: nowrap; }
  .cl-mapa-total { font-size: 16px; }
  .cl-portada .cl-nombre { font-size: clamp(34px, 10.5vw, 52px); text-wrap: balance; }
}
.cl-mapa { background: linear-gradient(180deg, rgba(10,8,24,.55), rgba(10,8,24,.35) 40%, rgba(10,8,24,.6)); }

/* v2.95 · Franco (7 nov, captura de La hamaca): la tarjeta del final entera (antes el dibujo se cortaba abajo) y los botones
   sin uno suelto: el principal ocupa la fila; «Otra vez» y «Niveles» de a dos; «Volver al inicio» abajo, entero. */
.cl-tarjeta-fin { padding: 6px 0 10px; grid-template-rows: minmax(0, 100%); box-sizing: border-box; }
.cl-tarjeta-fin .cl-tm-tarjeta { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; }
.cl-tarjeta-fin .cl-tm-tarjeta svg { width: 100%; height: 100%; }
.cl-fin-bs:not(:has(#fSig:not([hidden]))) > #fOtra { grid-column: 1 / -1; }
.cl-fin-bs:has(#fSig:not([hidden])) > #fInicio { grid-column: 1 / -1; }
.cl-fin-bs:has(#fNiveles[hidden]) > .cl-b { grid-column: 1 / -1; }
@media (orientation: landscape) and (max-height: 560px) {
  /* acostado: los botones en una sola fila (antes «Volver al inicio» quedaba abajo, cortado) */
  .cl-fin-bs { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .cl-fin-bs > .cl-b { grid-column: auto !important; }
}
/* v2.95 · la tarjeta del final con el arte de la portada (los 6 nuevos): la foto encima del dibujo de código (si no baja, queda el dibujo) */
.cl-tarjeta-fin .cl-tm-tarjeta.cl-tm-foto { position: relative; aspect-ratio: 16 / 10; }
.cl-tm-foto > svg { visibility: hidden; position: absolute; inset: 0; }
.cl-tm-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
/* v2.95 · los 6 nuevos (sobre los motores): la barra de arriba del juego deja lugar a la casita (izquierda) y a la pausa (derecha):
   antes el contador y el 🔊 quedaban debajo de la pausa, y en El muelle la casita tapaba el comienzo de la pregunta. Como La Canasta. */
#juego :is(.tz-top, .ds-top, .pg-top, .co-top, .dc-top, .rc-top) { padding-left: 80px !important; padding-right: 74px !important; box-sizing: border-box; }
/* v2.95 · en vertical, el globo de la consigna no se aprieta: el 🔊 y el contador suben a la fila de la casita y la pausa
   (entre las dos), y el globo baja a su propia fila, a todo el ancho. El Lumi chico del motor no va (el clásico tiene su personaje). */
@media (orientation: portrait) {
  #juego :is(.tz-top, .ds-top, .pg-top, .co-top, .dc-top, .rc-top) { flex-wrap: wrap; row-gap: 8px; padding-left: 10px !important; padding-right: 10px !important; align-items: center; }
  #juego :is(.tz-top, .ds-top, .pg-top, .co-top, .dc-top, .rc-top) > [class*="-lumi"] { display: none !important; }
  #juego :is(.tz-top, .ds-top, .pg-top, .co-top, .dc-top, .rc-top) > [class*="-redondo"] { order: -2; margin-left: auto; }
  #juego :is(.tz-top, .ds-top, .pg-top, .co-top, .dc-top, .rc-top) > [class*="-contador"] { order: -1; margin-left: auto; margin-right: 66px; min-height: 48px; display: flex; align-items: center; }
  #juego :is(.tz-top, .ds-top, .pg-top, .co-top, .dc-top, .rc-top) > [class*="-redondo"] + [class*="-contador"] { margin-left: 8px; }
  #juego :is(.tz-top, .ds-top, .pg-top, .co-top, .dc-top, .rc-top) > [class*="-globo"] { order: 1; flex: 1 1 100%; max-width: none; }
}
/* v2.95 · La Canasta acostada: el pedido va en la columna de la izquierda; el lugar para la pausa (74 px) no le corresponde
   (en 667×375 lo dejaba de 70 px: una palabra por renglón y cortado abajo) */
@media (orientation: landscape) { .cl .cn-top { padding-right: 0; } }