/* Tablero: una parcela de campo vista desde arriba (césped segado, green, búnkeres, portales) */
#boardArea { position: relative; width: max-content; margin: 0 auto; }
#board { display: grid; gap: 3px; border-radius: 8px; padding: 3px; background: var(--grout); /* junta entre casillas */ }

/* capa de piezas móviles (pelotas y hoyo) sobre la cuadrícula */
#pieces { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.piece {
  position: absolute; top: 0; left: 0;
  width: var(--cell-w); height: var(--cell-h);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.piece .cardOnCell { transition: transform .15s var(--ease-out); }
.hitFlash { box-shadow: 0 0 0 4px rgba(241,241,220,.95) !important; border-radius: 50%; }
.tilePop { animation: tilePop .3s var(--ease-out); }
@keyframes tilePop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cell {
  width: var(--cell-w); height: var(--cell-h);
  border-radius: 5px;
  /* casillas alternas en bandas diagonales de segado + grano */
  background-image: var(--grain); background-color: var(--grass-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background-color .2s var(--ease-out), box-shadow .2s;
}
/* columna de PAR: franja más clara, como marcas pintadas en el césped */
.cell.mowB { background-color: var(--grass-mid); }
.cell.par { background-color: var(--par-cell); }
.cell.cement { background-color: var(--cement-cell); }
.cell.sand { background-color: var(--sand-cell); }
.cell .parLabel {
  position: absolute; top: 5px; left: 0; right: 0; text-align: center;
  font-size: calc(var(--cell-w) * 0.16); font-weight: 500; letter-spacing: .12em;
  color: var(--on-grass);
}
/* casillas válidas: green claro */
.cell.selectable { background-color: var(--sel-cell); cursor: pointer; z-index: 2;
  box-shadow: inset 0 0 0 1.5px rgba(241,241,220,.55);
  animation: selPulse 1.8s ease-in-out infinite; }
@keyframes selPulse { 0%, 100% { background-color: var(--sel-cell); } 50% { background-color: var(--green-light); } }
.cell.selectable:hover { background-color: var(--green-light); animation: none; box-shadow: inset 0 0 0 2px var(--cream); }
.cell.selectable-out { cursor: pointer; z-index: 2;
  background-color: rgba(217,96,58,.22); box-shadow: inset 0 0 0 1.5px rgba(217,96,58,.7);
  background-image: repeating-linear-gradient(135deg, rgba(241,241,220,.18) 0 4px, transparent 4px 9px);
  animation: selOutPulse 1.8s ease-in-out infinite; }
@keyframes selOutPulse { 50% { box-shadow: inset 0 0 0 2px rgba(217,96,58,.95); } }
.cell.selectable-out:hover { background-color: rgba(217,96,58,.38); animation: none; }

/* salidas: tees crema con el anillo del color del jugador */
.spawnMark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cream); opacity: .85;
  box-shadow: 0 0 0 2px var(--pc, var(--cream-line)), 2px 2px 0 2px var(--shadow);
  z-index: 1;
}
.spawnMark.holeMark {
  width: 12px; height: 12px; background: transparent; opacity: .7;
  box-shadow: inset 0 0 0 2px rgba(241,241,220,.8);
}

/* piezas y losetas sobre la casilla */
.cardOnCell {
  width: calc(var(--cell-w) - 6px); height: calc(var(--cell-h) - 6px);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: calc(var(--cell-w) * 0.38);
  position: relative;
}
.cardOnCell .sub {
  position: absolute; bottom: 5%; left: 0; right: 0; text-align: center;
  font-size: calc(var(--cell-w) * 0.13); font-weight: 500; letter-spacing: .12em; color: rgba(36,36,36,.55);
}
.tilePic, .holeSvg { width: 100%; height: 100%; display: block; overflow: visible; }
/* hoyo: green circular con agujero y bandera (SVG en art.js) */
.tile-hole { width: var(--cell-w); height: var(--cell-h); background: transparent; }
.tile-bunker { background: transparent; }
.tile-bunker .tilePic { transform: scale(1.28) translateY(-3%); }
.tile-portal { background: transparent; }
.tile-portal .sub { color: rgba(241,241,220,.75); }
/* pelotas: círculos planos de su color con sombra corta diagonal */
.tile-ball { background: transparent; }
/* pelotas de golf de verdad en el color de cada jugador: hoyuelos, brillo, sombreado esférico
   y sello "J1" impreso en el centro */
.tile-ball .circ {
  --pc: #888;
  width: 64%; aspect-ratio: 1; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--pc);
  /* todo liso: brillo como círculo plano, hoyuelos como puntos planos, sombra de volumen como media luna dura */
  background-image:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.5) 0 12%, transparent 12.5%),
    radial-gradient(circle, rgba(0,0,0,.12) 0 .7px, transparent .8px);
  background-size: 100% 100%, 3.6px 3.6px;
  box-shadow: 4px 4px 0 var(--shadow), inset -3px -3px 0 rgba(0,0,0,.14);
}
.ballStamp {
  display: flex; align-items: center; justify-content: center;
  min-width: 58%; height: 38%; padding: 0 3px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: color-mix(in srgb, var(--pc) 70%, #1a1a1a);
  font-weight: 700; font-size: calc(var(--cell-w) * 0.15); letter-spacing: .01em; line-height: 1;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.badge {
  position: absolute; bottom: 3px; right: 3px; z-index: 6;
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--sand); color: var(--ink); font-size: 11px;
}

/* ---- arte bitmap (assets/art/*.png); si no existe el PNG se usa el fallback SVG ---- */
.card .cardArt { width: 62%; height: auto; }
.artCard { padding: 0; overflow: hidden; position: relative; }
.artCard img.fill { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ballTag {
  position: absolute; bottom: 3px; right: 3px; z-index: 2;
  font-size: calc(var(--cell-w) * 0.17); font-weight: 600; color: #fff;
  border-radius: 6px; padding: 0 4px;
}

/* portal: anillos concéntricos que nacen en el centro y crecen hasta el borde, desvaneciéndose
   (escala <= 1: nunca se salen de la esfera; el trazo no engorda al crecer) */
.portalRing { transform-origin: 50px 70px; transform-box: view-box; vector-effect: non-scaling-stroke; opacity: 0;
  animation: portalRing 3s cubic-bezier(.25,.6,.4,1) infinite; }
.cardSvg .portalRing { transform-origin: 50px 54px; }
.portalRing:nth-child(2) { animation-delay: -1s; }
.portalRing:nth-child(3) { animation-delay: -2s; }
@keyframes portalRing { 0% { transform: scale(.08); opacity: 0; } 18% { opacity: .95; } 100% { transform: scale(1); opacity: 0; } }
.portalCore { transform-origin: 50px 70px; transform-box: view-box; animation: portalCore 3s ease-in-out infinite; }
.cardSvg .portalCore { transform-origin: 50px 54px; }
@keyframes portalCore { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .portalRing, .portalCore { animation: none; }
  .portalRing { opacity: .5; } .portalRing:nth-child(1) { transform: scale(.35); } .portalRing:nth-child(2) { transform: scale(.68); }
}