/* Puntos y cajas · prado con tocones (puntos), vallas pintadas (líneas) y mantas de pícnic (cajas ganadas).
   Geometría: --n cajas por lado, --cel tamaño de una caja. Cada pieza se coloca con --x / --y en unidades de caja. */
.cj { --cel: max(34px, min(112px, calc((100vw - 64px) / (var(--n) + .7)), calc((100vh - 410px) / (var(--n) + .7))));
      --grosor: calc(var(--cel) / 4); --turno: var(--cq-coral);
      display: flex; flex-direction: column; align-items: center; gap: 12px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.cj.t2 { --turno: var(--cq-blue); }

/* marcador de cajas */
.cj-marcador { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.cj-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border: 3px solid var(--cq-ink); border-radius: 14px;
           background: #fff; box-shadow: 3px 3px 0 var(--cq-ink); transition: transform .15s, box-shadow .15s, background .15s; }
.cj-chip.dos-j2 { flex-direction: row-reverse; padding: 4px 4px 4px 12px; }
.cj-chip.activo { background: var(--j-l); box-shadow: 4px 4px 0 var(--j-d); transform: translateY(-2px); }
.cj-chip-m { position: relative; width: 40px; height: 40px; border-radius: 9px; overflow: hidden; border: 2px solid var(--cq-ink); line-height: 0; }
.cj-chip-m svg { width: 100%; height: 100%; }
.cj-chip-av { position: absolute; margin-left: 8px; line-height: 0; pointer-events: none; }
.cj-chip.dos-j2 .cj-chip-av { margin-left: 0; margin-right: 8px; }
.cj-chip-av svg { width: 24px; height: 24px; }
.cj-chip b { font: 800 26px/1 var(--cq-head); min-width: 1.2em; text-align: center; color: var(--cq-ink); }
.cj-quedan { font-weight: 800; font-size: 16px; color: var(--cq-ink2); min-width: 150px; text-align: center; padding: 6px 12px; border-radius: 999px; }
.cj-quedan b { font: 800 20px/1 var(--cq-head); color: var(--cq-ink); }
.cj-quedan.dos-j1, .cj-quedan.dos-j2 { background: var(--j-l); border: 3px solid var(--cq-ink); color: var(--cq-ink); }
.cj-otra { display: inline-block; animation: cj-late .5s steps(2) 3; }

/* marco: borde de seto con flores */
.cj-marco { position: relative; padding: calc(var(--cel) * .32 + 6px); border: 3px solid var(--cq-ink); border-radius: 22px;
            background: #4f9a3f; background-image: radial-gradient(circle at 20% 15%, #5aa846 0 6%, transparent 7%), radial-gradient(circle at 80% 85%, #5aa846 0 5%, transparent 6%);
            box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #6fc257, inset 0 -6px 0 #3d7f35, 0 0 0 5px var(--turno);
            transition: box-shadow .3s; }
.cj-deco { position: absolute; line-height: 0; pointer-events: none; z-index: 6; }
.cj-deco svg { width: calc(var(--cel) * .42); height: auto; min-width: 22px; max-width: 44px; }
.cj-deco-1 { left: -14px; bottom: -12px; }
.cj-deco-2 { right: -12px; top: -16px; }
.cj-deco-3 { left: 18%; top: -18px; animation: cj-vuela 6s steps(12) infinite; }
.cj-deco-3 svg { width: 30px; }

.cj-campo { position: relative; width: calc(var(--cel) * var(--n)); height: calc(var(--cel) * var(--n)); }
.cj-prado, .cj-cajas, .cj-lineas, .cj-postes, .cj-botones { position: absolute; inset: 0; }
.cj-prado { border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 3px #3d7f35; }
.cj-prado svg { width: 100%; height: 100%; display: block; }

/* cajas ganadas */
.cj-caja { position: absolute; left: calc(var(--x) * var(--cel)); top: calc(var(--y) * var(--cel)); width: var(--cel); height: var(--cel); }
.cj-manta { position: absolute; inset: calc(var(--grosor) / 2); line-height: 0; }
.cj-manta svg { width: 100%; height: 100%; display: block; }
.cj-animal { position: absolute; left: 50%; top: 50%; width: 56%; transform: translate(-50%, -50%); line-height: 0; filter: drop-shadow(0 2px 0 rgba(31, 34, 64, .35)); }
.cj-animal svg { width: 100%; height: auto; }
.cj-caja.nueva .cj-manta { animation: cj-manta .35s steps(4) both; }
.cj-caja.nueva .cj-animal { animation: cj-pop .55s steps(5) .15s both; }
.cj-mas { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); font: 800 calc(var(--cel) * .26)/1 var(--cq-head); color: #fff;
          text-shadow: 2px 2px 0 var(--cq-ink), -1px -1px 0 var(--cq-ink), 1px -1px 0 var(--cq-ink), -1px 1px 0 var(--cq-ink); animation: cj-sube 1s ease-out forwards; z-index: 7; }
.cj-chispa { position: absolute; left: calc(var(--x) * var(--cel) - 8px); top: calc(var(--y) * var(--cel) - 8px); line-height: 0; z-index: 7; pointer-events: none;
             animation: cj-chispa .8s steps(6) forwards; }

/* vallas */
.cj-l, .cj-fant { position: absolute; line-height: 0; z-index: 3; }
.cj-lh { left: calc((var(--x) - .5) * var(--cel)); top: calc(var(--y) * var(--cel) - var(--grosor) / 2); width: var(--cel); height: var(--grosor); }
.cj-lv { left: calc(var(--x) * var(--cel) - var(--grosor) / 2); top: calc((var(--y) - .5) * var(--cel)); width: var(--grosor); height: var(--cel); }
.cj-l svg, .cj-fant svg { width: 100%; height: 100%; display: block; }
.cj-l { filter: drop-shadow(0 2px 0 rgba(31, 34, 64, .3)); }
.cj-lh.nueva { animation: cj-traza-h .3s steps(5) both; }
.cj-lv.nueva { animation: cj-traza-v .3s steps(5) both; }
.cj-l.ultima { filter: drop-shadow(3px 0 0 #ffcf4a) drop-shadow(-3px 0 0 #ffcf4a) drop-shadow(0 3px 0 #ffcf4a) drop-shadow(0 -3px 0 #ffcf4a) drop-shadow(0 0 1px #1f2240); }
.cj-l.ultima.nueva { animation-name: cj-traza-h, cj-brilla; animation-duration: .3s, .5s; animation-timing-function: steps(5), steps(2); animation-iteration-count: 1, 4; }
.cj-lv.ultima.nueva { animation-name: cj-traza-v, cj-brilla; }
@media (hover: none) { .cj-fant { display: none !important; } }
.cj-fant { display: none; opacity: .5; z-index: 2; pointer-events: none; }
.cj-fant.on { display: block; animation: cj-parpadeo 1s steps(2) infinite; }

/* tocones */
.cj-poste { position: absolute; z-index: 4; width: calc(var(--cel) * .36); height: calc(var(--cel) * .36); min-width: 18px; min-height: 18px;
            left: calc(var(--x) * var(--cel)); top: calc(var(--y) * var(--cel)); transform: translate(-50%, -50%); line-height: 0; pointer-events: none; }
.cj-poste svg { width: 100%; height: 100%; }

/* zonas de toque: rombos que llenan el tablero (cada línea es dueña de los triángulos de sus cajas) */
.cj-botones { z-index: 5; }
.cj-b { position: absolute; left: calc((var(--x) - .5) * var(--cel)); top: calc((var(--y) - .5) * var(--cel)); width: var(--cel); height: var(--cel);
        border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); -webkit-tap-highlight-color: transparent; }
.cj-b:focus { outline: none; }
.cj-b:focus-visible { background: radial-gradient(circle, rgba(255, 207, 74, .55) 0 22%, rgba(255, 207, 74, .22) 23% 60%, transparent 61%); }
.cj-b.hecha, .cj.espera .cj-b { cursor: default; }
.cj-b.hecha:focus-visible, .cj.espera .cj-b:focus-visible { background: radial-gradient(circle, rgba(255, 255, 255, .4) 0 18%, transparent 19%); }

/* elegir tamaño */
.cj-opc { width: min(860px, 100%); background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg); box-shadow: var(--cq-sh-lg); padding: 24px; }
.cj-opc-cab { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.cj-opc-arte { flex: none; line-height: 0; padding: 6px; border-radius: 16px; border: 3px solid var(--cq-ink); background: var(--cq-mint-l); box-shadow: 3px 3px 0 var(--cq-ink); }
.cj-opc h2 { margin: 0; }
.cj-opc-cab p { margin: 6px 0 0; color: var(--cq-ink2); font-size: 17px; }
.cj-tams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cj-tam { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border: 3px solid var(--cq-ink); border-radius: 18px;
          background: var(--cq-bg); color: var(--cq-ink); font: inherit; cursor: pointer; box-shadow: var(--cq-sh); transition: transform .14s, box-shadow .14s, background .14s; }
.cj-tam:hover:not(:disabled), .cj-tam:focus-visible { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--cq-ink); background: var(--cq-mint-l); }
.cj-tam:focus-visible { outline: 3px solid var(--cq-blue); outline-offset: 3px; }
.cj-tam:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--cq-ink); }
.cj-tam:disabled { cursor: default; opacity: .75; }
.cj-tam-prev { line-height: 0; margin-bottom: 4px; padding: 4px; border-radius: 10px; background: #4f9a3f; border: 2px solid var(--cq-ink); }
.cj-tam b { font: 800 24px/1.1 var(--cq-head); }
.cj-tam small { font-size: 14px; font-weight: 700; color: var(--cq-ink2); text-align: center; }
.cj-opc-esp { text-align: center; margin: 14px 0 0; }

/* reglas */
.cj-reglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 6px; }
.cj-reglas figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 15px; line-height: 1.35; }
.cj-reglas .cq-px { line-height: 0; }
.cj-reglas .cq-px svg { width: 100%; max-width: 144px; height: auto; }

@keyframes cj-traza-h { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cj-traza-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cj-manta { from { transform: scale(.3); opacity: 0; } }
@keyframes cj-pop { 0% { transform: translate(-50%, -50%) scale(0); } 60% { transform: translate(-50%, -70%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes cj-sube { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } }
@keyframes cj-chispa { to { transform: translate(calc(var(--dx) * var(--cel) * .5), calc(var(--dy) * var(--cel) * .5)) scale(.4); opacity: 0; } }
@keyframes cj-brilla { 50% { opacity: .55; } }
@keyframes cj-parpadeo { 50% { opacity: .3; } }
@keyframes cj-late { 50% { transform: scale(1.08); } }
@keyframes cj-vuela { 0% { transform: translate(0, 0); } 25% { transform: translate(40px, -6px); } 50% { transform: translate(90px, 2px); } 75% { transform: translate(40px, 6px); } 100% { transform: translate(0, 0); } }

@media (max-width: 760px) {
  .cj { --cel: max(34px, min(100px, calc((100vw - 40px) / (var(--n) + .7)), calc((100vh - 330px) / (var(--n) + .7)))); gap: 10px; }
  .cj-marco { border-radius: 16px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #6fc257, inset 0 -4px 0 #3d7f35, 0 0 0 4px var(--turno); }
  .cj-marcador { gap: 8px; }
  .cj-chip { padding: 3px 9px 3px 3px; border-radius: 12px; }
  .cj-chip.dos-j2 { padding: 3px 3px 3px 9px; }
  .cj-chip-m { width: 34px; height: 34px; }
  .cj-chip b { font-size: 22px; }
  .cj-quedan { min-width: 0; font-size: 14px; padding: 4px 8px; }
  .cj-opc { padding: 18px 14px; }
  .cj-opc-cab { flex-direction: column; text-align: center; gap: 10px; }
  .cj-tams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cj-reglas { grid-template-columns: minmax(0, 1fr); }
  .cj-reglas figure { flex-direction: row; text-align: left; }
  .cj-reglas .cq-px svg { width: 110px; }
  .cj-tam-prev svg { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .cj-deco-3, .cj-fant.on, .cj-otra, .cj-caja.nueva .cj-manta, .cj-caja.nueva .cj-animal, .cj-lh.nueva, .cj-lv.nueva { animation: none !important; }
  .cj-mas, .cj-chispa { display: none; }
}