/* Motor «juntar de a tres» · la pantalla (CLÁSICOS IC v0.2 · La Canasta). Sin scroll; las frutas, de 48 px o más; la letra, de 18 px o más. */
.cn { position: absolute; inset: 0; display: flex; flex-direction: column; box-sizing: border-box; color: #2b1d0e; font-family: "Baloo 2", "Nunito", system-ui, sans-serif; }
.cn-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px 76px; min-height: 64px; box-sizing: border-box; }
.cn-globo { flex: 1; min-width: 0; background: #fff8e8; border-radius: 18px; padding: 6px 12px; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.cn-pedido { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; line-height: 1.15; }
.cn-pedido.nuevo { animation: cn-nuevo .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes cn-nuevo { from { transform: scale(.85); opacity: .3; } to { transform: none; opacity: 1; } }
.cn-pdib { flex: 0 0 auto; width: 44px; height: 44px; }
.cn-pdib svg { width: 100%; height: 100%; }
.cn-ptxt { flex: 1; min-width: 0; }
.cn-oir { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(43,29,14,.18); background: #fff; font-size: 22px; cursor: pointer; }
.cn-sub { font-size: 18px; font-weight: 600; opacity: .85; line-height: 1.2; }
.cn-sub.bien { color: #2f7d4a; opacity: 1; font-weight: 800; }
.cn-sub.pista, .cn-sub.muestra { color: #9a5a00; opacity: 1; font-weight: 800; }
.cn-contador { flex: 0 0 auto; font-size: 20px; font-weight: 800; color: #fff4d6; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.cn-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
/* la canasta y los 6 pedidos */
.cn-lado { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.cn-canasta { position: relative; width: clamp(110px, 32vw, 170px); aspect-ratio: 3 / 2; }
.cn-cesta { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.cn-dentro { position: absolute; left: 6%; right: 6%; top: 18%; bottom: 8%; overflow: hidden; }
.cn-en-canasta { position: absolute; width: 34%; aspect-ratio: 1; transform: rotate(var(--r)); animation: cn-cae .45s cubic-bezier(.3,1.6,.5,1); }
.cn-en-canasta svg { width: 100%; height: 100%; }
@keyframes cn-cae { from { transform: translateY(-40px) rotate(var(--r)); opacity: 0; } to { transform: rotate(var(--r)); opacity: 1; } }
.cn-canasta.salta { animation: cn-salta .5s cubic-bezier(.3,1.6,.5,1) .5s; }
@keyframes cn-salta { 40% { transform: scale(1.08, .92); } 70% { transform: scale(.97, 1.04); } }
.cn-puntos { display: grid; grid-template-columns: repeat(3, 22px); gap: 6px; }
.cn-punto { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.cn-punto.ahora { box-shadow: inset 0 0 0 3px #ffd76a; }
.cn-punto.v { background: #5cb85c; } .cn-punto.a { background: #f0c419; } .cn-punto.x { background: #e9e4da; }
/* el tablero: 7 × 7 frutas en el mostrador */
.cn-tablero { --lado: min(calc((100vw - 28px) / 7), calc((100% - 0px) / 7)); display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 6px; border-radius: 16px;
  width: min(calc(100vw - 24px), calc(100% - 0px), 470px); aspect-ratio: 1; max-height: 100%; box-sizing: border-box; touch-action: none; user-select: none;
  background: rgba(60,34,14,.55); box-shadow: inset 0 3px 10px rgba(0,0,0,.45), 0 0 0 4px rgba(120,74,36,.9); }
.cn-celda { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 12px; background: rgba(255,248,232,.18); cursor: pointer; display: grid; place-items: center; }
.cn-celda:focus-visible { outline: 3px solid #ffd76a; outline-offset: -1px; }
.cn-celda .cn-dib { width: 94%; height: 94%; transition: transform .12s ease; pointer-events: none; }
.cn-celda:active .cn-dib { transform: scale(.88); }
.cn-celda.sel { background: rgba(255,215,106,.55); box-shadow: 0 0 0 3px #ffd76a; }
.cn-celda.sel .cn-dib { transform: scale(1.1) translateY(-2px); }
.cn-celda.no .cn-dib { animation: cn-no .3s ease; }
@keyframes cn-no { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cn-celda.junta .cn-dib { animation: cn-junta .26s ease forwards; }
@keyframes cn-junta { 40% { transform: scale(1.25); } 100% { transform: scale(0); opacity: 0; } }
.cn-celda.cae .cn-dib { animation: cn-baja .32s cubic-bezier(.3,1.5,.5,1); }
@keyframes cn-baja { from { transform: translateY(-60%); opacity: .2; } to { transform: none; opacity: 1; } }
.cn-celda.esp { background: radial-gradient(circle, rgba(255,240,170,.75), rgba(255,215,106,.2) 70%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.85); }
.cn-celda.esp::after { content: ''; position: absolute; inset: 8% 4%; border-radius: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.55) 6px 9px); -webkit-mask: linear-gradient(transparent 35%, #000 45%, #000 55%, transparent 65%); mask: linear-gradient(transparent 35%, #000 45%, #000 55%, transparent 65%); }
.cn-celda.nace { animation: cn-nace .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes cn-nace { from { transform: scale(.4); } to { transform: none; } }
.cn-celda.brilla { animation: cn-brilla 1.1s ease-in-out infinite; }
@keyframes cn-brilla { 50% { background: rgba(255,236,150,.85); box-shadow: 0 0 12px 3px rgba(255,215,106,.9); } }
.cn-num { position: absolute; right: -2px; top: -3px; min-width: 21px; height: 21px; border-radius: 11px; background: rgba(255,248,232,.95); color: #2b1d0e; font-size: 18px; font-weight: 800; line-height: 21px; text-align: center; pointer-events: none; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.cn-tablero.mezcla .cn-celda .cn-dib { animation: cn-mezcla .3s ease; }
@keyframes cn-mezcla { 50% { transform: rotate(180deg) scale(.4); opacity: .3; } }
.cn-vuela { position: fixed; z-index: 30; pointer-events: none; }
.cn-vuela svg { width: 100%; height: 100%; }
@media (orientation: portrait) { .cn-contador { display: none; } }   /* parado: los 6 cuadritos ya dicen cuánto va */
/* acostado: el tablero al medio, de alto entero; el pedido a la izquierda (debajo de la casita) y la canasta a la derecha (debajo de la pausa) */
@media (orientation: landscape) {
  .cn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 1fr; grid-template-areas: "top tab lado"; gap: 12px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .cn-cuerpo { display: contents; }
  .cn-top { grid-area: top; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 70px 0 0 0; min-height: 0; }
  .cn-tablero { grid-area: tab; align-self: center; width: auto; height: min(calc(100vh - 12px), 620px); max-height: none; }
  .cn-lado { grid-area: lado; flex-direction: column; justify-content: flex-start; padding-top: 70px; }
  .cn-contador { text-align: center; }
  .cn-globo { flex: 0 0 auto; }
  .cn-pedido { flex-wrap: wrap; }
  .cn-ptxt { flex: 1 1 100%; order: 3; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .cn-pedido { font-size: 20px; } .cn-pdib { width: 36px; height: 36px; }
  .cn-globo { padding: 6px 10px; }
  .cn-canasta { width: clamp(96px, 20vw, 150px); }
}
@media (prefers-reduced-motion: reduce) { .cn-pedido.nuevo, .cn-celda .cn-dib, .cn-celda.cae .cn-dib, .cn-celda.junta .cn-dib, .cn-celda.brilla, .cn-celda.nace, .cn-en-canasta, .cn-canasta.salta { animation: none !important; transition: none; } .cn-celda.junta .cn-dib { opacity: .2; } .cn-celda.brilla { background: rgba(255,236,150,.85); } }

/* con «Calma» la pista no se apaga: queda el brillo quieto (como con «menos movimiento») */
.cl-calma .cn-celda.brilla { background: rgba(255,236,150,.85); box-shadow: 0 0 0 3px #ffd76a; }
/* teléfonos angostos (360): sin relleno de más, para que las frutas queden lo más grandes posible */
@media (max-width: 380px) and (orientation: portrait) { .cn-cuerpo { padding-left: 2px; padding-right: 2px; } .cn-tablero { width: calc(100vw - 4px); gap: 2px; padding: 3px; } }

/* ── el arte de verdad (Franco, 19 oct: frutas caramelo y la canasta de palma) ── */
img.cn-dib { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.cn-celda img.cn-dib { width: 90%; height: 90%; }
.cn-celda.esp img.cn-dib { filter: drop-shadow(0 0 4px #fff3b0) drop-shadow(0 0 8px rgba(255,200,60,.95)) saturate(1.15); }
.cn-celda.sel img.cn-dib { filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)) brightness(1.08); }
.cn-pdib img, .cn-vuela img, .cn-en-canasta img { width: 100%; height: 100%; }
.cn-canasta.cn-arte { aspect-ratio: 5 / 4; }
.cn-cesta-img { object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.cn-canasta.cn-arte .cn-dentro { left: 22%; right: 22%; top: 46%; bottom: 14%; overflow: visible; }
.cn-canasta.cn-arte .cn-en-canasta { width: 40%; }
/* las celdas como bandejitas de vidrio (la piel candy) */
.cn-celda { background: linear-gradient(180deg, rgba(255,250,236,.32), rgba(255,244,224,.14)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.08); }