/* Puzle compartido (/dos/puzle/): va después de /dos/dos.css. Tablero de madera con lámina pixel, bandejas de piezas
   con marco del color de su dueño (coral jugador 1, azul jugador 2), arrastre, pistas y brillo final. */
.pz { width: 100%; user-select: none; -webkit-user-select: none; }

/* ---------- elegir lámina ---------- */
.pz-elige { max-width: 980px; margin: 0 auto; background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg); box-shadow: var(--cq-sh-lg); padding: 22px 24px 24px; }
.pz-elige-cab { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.pz-elige-arte { flex: none; line-height: 0; background: var(--cq-lila-l); border: 3px solid var(--cq-ink); border-radius: 16px; padding: 8px; box-shadow: 3px 3px 0 var(--cq-ink); }
.pz-elige-cab p { margin: 6px 0 0; color: var(--cq-ink2); font-size: 17px; }
.pz-laminas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pz-lamina { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 10px; cursor: pointer; font: inherit; color: var(--cq-ink);
             background: var(--cq-bg); border: 3px solid var(--cq-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--cq-ink); transition: transform .12s, box-shadow .12s, background .12s; }
.pz-lamina:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cq-ink); }
.pz-lamina[aria-checked="true"] { background: var(--cq-yellow-l); box-shadow: 4px 4px 0 var(--cq-yellow-d), 0 0 0 4px var(--cq-yellow); transform: translateY(-3px); }
.pz-mini { display: block; width: 100%; aspect-ratio: 1; line-height: 0; border: 3px solid var(--cq-ink); border-radius: 10px; overflow: hidden; background: #fff; }
.pz-mini svg { width: 100%; height: 100%; }
.pz-lamina b { font: 800 16px/1.15 var(--cq-head); text-align: center; }
.pz-rec { min-height: 1.2em; font-size: 13px; font-weight: 700; color: var(--cq-mint-d); }
.pz-tams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.pz-tam { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; text-align: left; padding: 10px 12px; cursor: pointer;
          font: inherit; color: var(--cq-ink); background: #fff; border: 3px solid var(--cq-ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--cq-ink); min-height: 64px; }
.pz-tam[aria-checked="true"] { background: var(--cq-mint-l); box-shadow: 3px 3px 0 var(--cq-mint-d), 0 0 0 3px var(--cq-mint); }
.pz-tam b { font: 800 17px/1.1 var(--cq-head); } .pz-tam small { font-weight: 700; color: var(--cq-ink2); font-size: 14px; }
.pz-rejilla { grid-row: 1 / span 2; width: 38px; height: 38px; border: 3px solid var(--cq-ink); border-radius: 6px; background-color: #ffe3a0;
              background-image: linear-gradient(90deg, var(--cq-ink) 2px, transparent 2px), linear-gradient(var(--cq-ink) 2px, transparent 2px);
              background-size: calc(100% / var(--n)) calc(100% / var(--n)); background-position: -1px -1px; }
.pz-elige-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 20px 0 0; }
.pz-hechos { font-weight: 700; color: var(--cq-ink2); font-size: 15px; }
.pz-montar { font-size: 20px; padding: 12px 26px; display: inline-flex; gap: 10px; align-items: center; }
.pz-elige [aria-disabled="true"] { cursor: default; }
.pz-lamina:focus-visible, .pz-tam:focus-visible { outline: 4px solid var(--cq-blue); outline-offset: 3px; }

/* ---------- partida ---------- */
.pz-fase-j { --b: max(300px, min(560px, calc(100vh - 330px))); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: start; }
.pz-centro { width: calc(var(--b) + 32px); }
.pz-herr { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pz-prog { position: relative; flex: 1; height: 28px; display: flex; border: 3px solid var(--cq-ink); border-radius: 999px; background: #efe7d8; overflow: hidden; box-shadow: 2px 2px 0 var(--cq-ink); }
.pz-prog i { display: block; height: 100%; transition: width .4s steps(6); }
.pz-prog-1 { background: repeating-linear-gradient(90deg, var(--cq-coral) 0 10px, #ff9e84 10px 14px); }
.pz-prog-2 { background: repeating-linear-gradient(90deg, var(--cq-blue) 0 10px, #4b82f5 10px 14px); }
.pz-prog-t { position: absolute; inset: 0; display: grid; place-items: center; font: 800 15px/1 var(--cq-head); color: var(--cq-ink);
             text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff; }
.pz-reloj { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 3px solid var(--cq-ink); border-radius: 12px; background: #fff; font: 800 17px/1 var(--cq-head); font-variant-numeric: tabular-nums; min-width: 90px; }
.pz-guia-b[aria-pressed="false"] { opacity: .75; }

.pz-marco { position: relative; padding: 13px; border: 3px solid var(--cq-ink); border-radius: 16px; background: #8a5a30;
            box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #b4793f, inset 0 -6px 0 #6e4524;
            background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 9px); }
.pz-tab { position: relative; contain: layout paint; width: var(--b); height: var(--b); border-radius: 4px; background-color: #f6ecd9;
          background-image: linear-gradient(90deg, rgba(110, 69, 36, .2) 2px, transparent 2px), linear-gradient(rgba(110, 69, 36, .2) 2px, transparent 2px);
          background-size: calc(100% / var(--n)) calc(100% / var(--n)); background-position: -1px -1px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .18); }
.pz-guia { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; opacity: 0; transition: opacity .3s; }
.pz-tab.con-guia .pz-guia { opacity: .24; }
.pz-puestas, .pz-huecos { position: absolute; inset: 0; }
.pz-huecos { z-index: 3; }
.pz-hueco { position: absolute; left: calc(var(--c) * 100% / var(--n)); top: calc(var(--f) * 100% / var(--n)); width: calc(100% / var(--n)); height: calc(100% / var(--n));
            border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 4px; }
.pz-hueco.lleno { cursor: default; }
.pz-hueco:focus-visible { outline: 4px solid var(--cq-yellow); outline-offset: -4px; box-shadow: inset 0 0 0 7px rgba(31, 34, 64, .55); }
.pz-con-sel .pz-hueco:not(.lleno):hover, .pz-hueco.sobre:not(.lleno) { background: rgba(255, 207, 74, .38); box-shadow: inset 0 0 0 3px var(--cq-yellow-d); }
.pz-hueco.pz-no { animation: pz-no .35s steps(4); background: rgba(255, 138, 107, .3); }
.pz-hueco.pz-pista { animation: pz-pista .4s steps(2) 4; background: rgba(255, 233, 150, .7); box-shadow: inset 0 0 0 4px var(--cq-yellow-d); }

.pz-puesta { position: absolute; z-index: 1; pointer-events: none; line-height: 0;
             left: calc((var(--c) - .25) * 100% / var(--n)); top: calc((var(--f) - .25) * 100% / var(--n)); width: calc(150% / var(--n)); height: calc(150% / var(--n)); }
.pz-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pz-svg image { image-rendering: pixelated; }
.pz-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.pz-tinta { stroke: var(--cq-ink); stroke-width: 5px; }
.pz-color { stroke: var(--j, #fff); stroke-width: 2.5px; }
.pz-luz { stroke: rgba(255, 255, 255, 0); stroke-width: 1px; }
.pz-svg .pz-sombra { fill: rgba(31, 34, 64, .32); stroke: none; }
.pz-puesta .pz-sombra { display: none; }
.pz-band-1, .pz-d1 { --j: var(--cq-coral); } .pz-band-2, .pz-d2 { --j: var(--cq-blue); }
.pz-puesta .pz-tinta { stroke: rgba(31, 34, 64, .28); stroke-width: 1px; transition: stroke .8s; }
.pz-puesta .pz-color { stroke: transparent; }
.pz-puesta.pz-entra { animation: pz-entra .5s steps(5); z-index: 2; }
.pz-puesta.pz-entra .pz-color { stroke: var(--j); stroke-width: 3px; animation: pz-marco .6s steps(3) forwards; }
.pz-tab.ganado .pz-puesta .pz-tinta { stroke: transparent; }
.pz-tab.ganado .pz-guia { opacity: 0; }
.pz-brillo { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: 4px; }
.pz-tab.ganado .pz-brillo::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: 0; transform: translateX(-150%) skewX(-18deg); will-change: transform;
                                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 40%, rgba(255, 246, 200, .8) 50%, rgba(255, 255, 255, .55) 60%, transparent);
                                    animation: pz-brilla 1.6s ease-in-out .3s 2; }
.pz-tab.ganado { box-shadow: 0 0 0 4px var(--cq-yellow), 0 0 0 8px rgba(255, 207, 74, .45); }
.pz-chispa { position: absolute; z-index: 5; width: 8px; height: 8px; margin: -4px; background: var(--cq-yellow); box-shadow: 0 0 0 2px var(--cq-ink);
             pointer-events: none; animation: pz-chispa .65s steps(6) forwards; }

/* ---------- bandejas ---------- */
.pz-band { background: var(--j-l); border: 3px solid var(--cq-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--j-d); padding: 10px 10px 12px; min-width: 0; }
.pz-band-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pz-band-cab b { font: 800 17px/1.1 var(--cq-head); }
.pz-band-ico { line-height: 0; }
.pz-band-n { margin-left: auto; font-weight: 800; font-size: 13.5px; color: var(--cq-ink); background: #fff; border: 2px solid var(--cq-ink); border-radius: 999px; padding: 2px 9px; }
.pz-candado { line-height: 0; }
.pz-ranuras { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.pz-pieza { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: rgba(255, 255, 255, .55); border-radius: 12px; cursor: grab; line-height: 0;
            touch-action: none; transition: transform .12s, background .12s; box-shadow: inset 0 0 0 2px rgba(31, 34, 64, .12); }
.pz-pieza:hover:not(.pz-ida):not([aria-disabled="true"]) { transform: translateY(-3px) rotate(-2deg); }
.pz-pieza:focus-visible { outline: 4px solid var(--cq-ink); outline-offset: 0; background: #fff; }
.pz-pieza.pz-sel { background: var(--cq-yellow); transform: translateY(-4px) scale(1.04); box-shadow: inset 0 0 0 3px var(--cq-ink); }
.pz-pieza.pz-sel .pz-svg { animation: pz-flota 1s steps(2) infinite; }
.pz-pieza.pz-fuera .pz-svg { opacity: .2; }
.pz-pieza.pz-ida { visibility: hidden; }
.pz-ajena .pz-pieza { cursor: not-allowed; }
.pz-ajena .pz-pieza .pz-svg { opacity: .8; }
.pz-pieza.pz-cogida { background: #fff; box-shadow: inset 0 0 0 3px var(--j-d); }
.pz-pieza.pz-cogida .pz-svg { opacity: 1; animation: pz-flota .8s steps(2) infinite; }
.pz-band.pz-vacia .pz-ranuras::after { content: "¡Todas en su sitio!"; grid-column: 1 / -1; text-align: center; font: 800 16px/1.2 var(--cq-head); padding: 10px 0; color: var(--j-d); }
.pz-espera .pz-pieza { cursor: default; }
.pz-vuela { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; line-height: 0; }
.pz-vuela .pz-sombra { transform: translate(.1px, .13px); fill: rgba(31, 34, 64, .4); }
.pz-vuela .pz-svg { animation: pz-coge .18s steps(2) forwards; }
.pz-ayuda { min-height: 1.4em; margin: 12px 0 0; text-align: center; font-weight: 800; color: var(--cq-ink); font-size: 16px; }

/* ---------- reglas ---------- */
.pz-reglas-arte { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.pz-reglas-arte span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pz-reglas-arte small { font-weight: 800; font-size: 12.5px; color: var(--cq-ink2); }

@keyframes pz-entra { 0% { transform: scale(1.18); filter: brightness(1.35); } 60% { transform: scale(.97); } 100% { transform: none; filter: none; } }
@keyframes pz-marco { to { stroke: transparent; } }
@keyframes pz-no { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pz-pista { 50% { background: rgba(255, 207, 74, .2); } }
@keyframes pz-brilla { to { transform: translateX(330%) skewX(-18deg); } }
@keyframes pz-chispa { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@keyframes pz-flota { 50% { transform: translateY(-3px); } }
@keyframes pz-coge { to { transform: scale(1.06) rotate(-3deg); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pz-fase-j { --b: max(280px, min(520px, calc(100vh - 280px), calc(100vw - 420px))); }
}
@media (max-width: 860px) {
  .pz-fase-j { --b: min(calc(100vw - 58px), 560px); grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pz-centro { order: -1; width: calc(var(--b) + 24px); max-width: 100%; justify-self: center; }
  .pz-ajena { order: 2; }
  .pz-marco { padding: 9px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #b4793f, inset 0 -4px 0 #6e4524; }
  .pz-ranuras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pz-ajena .pz-ranuras { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .pz-laminas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-tams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-herr { gap: 8px; } .pz-reloj { min-width: 0; padding: 6px 8px; font-size: 15px; }
}
@media (max-width: 520px) {
  .pz-elige { padding: 16px 12px; }
  .pz-elige-cab { flex-direction: column; text-align: center; gap: 8px; }
  .pz-laminas { gap: 8px; }
  .pz-lamina b { font-size: 14px; }
  .pz-tams { gap: 8px; } .pz-tam { padding: 8px; } .pz-rejilla { width: 30px; height: 30px; }
  .pz-elige-pie { justify-content: center; }
  .pz-montar { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-puesta.pz-entra, .pz-puesta.pz-entra .pz-color, .pz-hueco.pz-no, .pz-hueco.pz-pista, .pz-pieza.pz-sel .pz-svg, .pz-pieza.pz-cogida .pz-svg, .pz-vuela .pz-svg { animation: none !important; }
  .pz-tab.ganado .pz-brillo::after { display: none; }
  .pz-prog i { transition: none; }
}