/* FX / game feel (todo decorativo) + movimiento reducido */
/* ==================== FX / GAME FEEL ==================== */
/* capas de partículas (canvas) + capa DOM para elementos fx (estela, combo, trayectoria) */
.fxCanvas { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.fxCanvasFixed { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
#fxLayer { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: visible; }

/* sombra de suelo bajo las pelotas (pseudo-elemento, no fuerza layout) */
.piece.pball::before {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: 3px; height: 9px;
  border-radius: 50%; background: rgba(46,66,38,.28); filter: blur(2.5px);
  transition: transform .15s, opacity .15s;
}
.piece.air::before { transform: scale(.6); opacity: .5; }

/* squash & stretch al arrancar/frenar cada paso */
.piece.glide .cardOnCell { animation: glideWob .28s ease-out; }
@keyframes glideWob {
  0%   { transform: scale(1.14,.84); }
  55%  { transform: scale(.94,1.07); }
  100% { transform: scale(1); }
}
.piece .cardOnCell { filter: drop-shadow(0 2px 2px rgba(60,80,40,.16)); }

/* semi-hundida en el búnker (estado persistente) */
.piece.sunk .cardOnCell { transform: translateY(10%) scale(.88); filter: saturate(.85) drop-shadow(0 1px 1px rgba(60,80,40,.12)); }
.piece.sunk::after {
  content: ''; position: absolute; left: 7%; right: 7%; bottom: 2%; height: 30%;
  background: var(--cell-sand); border-radius: 45% 45% 38% 38%;
  box-shadow: inset 0 3px 4px rgba(120,90,30,.4), 0 -1px 2px rgba(255,240,200,.6);
}
.piece.sunk::before { opacity: 0; }

/* portal: succión / expulsión con glow */
.piece.warp .cardOnCell { filter: drop-shadow(0 0 9px rgba(158,132,255,.95)) brightness(1.18); }
.piece.warpOut .cardOnCell { animation: warpOut .24s ease-in forwards; }
@keyframes warpOut { to { transform: scale(.08) rotate(210deg); } }
.piece.warpIn .cardOnCell { animation: warpIn .28s cubic-bezier(.3,1.5,.5,1); }
@keyframes warpIn { from { transform: scale(.08) rotate(-190deg); } to { transform: scale(1) rotate(0); } }

/* caída del tablero: rueda hacia fuera */
.piece.falling .cardOnCell { animation: fallRoll .34s ease-in forwards; }
@keyframes fallRoll { to { transform: rotate(215deg) scale(.72); } }

/* reaparición con drop-in y rebote */
.piece.dropping .cardOnCell { animation: dropIn .46s cubic-bezier(.3,1.4,.5,1); }
@keyframes dropIn {
  0%   { transform: translateY(-58%) scale(.72); }
  55%  { transform: translateY(3%)  scale(1.05,.9); }
  80%  { transform: translateY(-2%) scale(.97,1.04); }
  100% { transform: translateY(0)   scale(1); }
}

/* embocar: espiral de succión hacia el centro */
.piece.sinking .cardOnCell { animation: sinkSpin .42s cubic-bezier(.55,.1,.75,.4) forwards; }
@keyframes sinkSpin {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(.78) rotate(120deg); }
  100% { transform: scale(.04) rotate(320deg); }
}

/* golpe seco: sacudida del tablero (2-3 px) */
#boardArea.shake { animation: shakeX .3s linear; }
@keyframes shakeX {
  0%, 100% { transform: translate(0,0); }
  18% { transform: translate(-3px,1px); } 36% { transform: translate(3px,-1px); }
  54% { transform: translate(-2px,-1px); } 72% { transform: translate(2px,1px); }
  88% { transform: translate(-1px,0); }
}

/* flash del tablero (NO / rebobinado) */
#boardFlash { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: rgba(235,245,255,.92); /* plano */
  opacity: 0; border-radius: 12px; }
#boardFlash.go { animation: flashGo .48s ease-out; }
@keyframes flashGo { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.piece.rewind .cardOnCell { animation: rewindWob .42s ease-in-out; }
@keyframes rewindWob {
  0%, 100% { transform: rotate(0) scale(1); filter: hue-rotate(0); }
  30% { transform: rotate(-7deg) scale(1.08); filter: hue-rotate(160deg) brightness(1.3); }
  65% { transform: rotate(5deg) scale(.96); filter: hue-rotate(160deg) brightness(1.15); }
}

/* escena del menú: animación ambiental (colores planos, sin barrido de luz) */
.mClouds { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-22px); } to { transform: translateX(30px); } }
.mFlag { transform-box: fill-box; transform-origin: left center; animation: wave 2s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(7deg) scaleX(.93); } }
.mShine { animation: shimmer 3.4s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { opacity: .3; transform: translateX(0); } 50% { opacity: .75; transform: translateX(26px); } }
.mTree { transform-box: fill-box; transform-origin: bottom center; animation: sway 5s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg); } }
.mBallMenu { animation: ballBob 2.6s ease-in-out infinite; }
@keyframes ballBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* transición corta entre pantallas (se dispara al pasar de display:none a visible) */
#menuScreen .mContent, #gameScreen, #editorScreen, #storyScreen { animation: screenIn .3s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* editor: flash al colocar/borrar */
.cell.edFlash { animation: edFlash .38s ease-out; z-index: 2; }
@keyframes edFlash {
  0% { outline: 3px solid var(--hl); box-shadow: 0 0 16px rgba(255,171,46,.9); }
  100% { outline: 3px solid transparent; box-shadow: 0 0 0 rgba(255,171,46,0); }
}

/* zoom sutil del tablero al embocar */
#boardArea.zoomPulse { animation: zoomPulse .6s cubic-bezier(.3,1.3,.5,1); }
@keyframes zoomPulse { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }
/* zoom + sacudida breve en el slam de JAQUE */
#boardArea.zoomShake { animation: zoomShake .42s cubic-bezier(.3,1.2,.5,1); }
@keyframes zoomShake {
  0% { transform: scale(1) translate(0,0); }
  30% { transform: scale(1.03) translate(-2px,1px); }
  55% { transform: scale(1.035) translate(2px,-1px); }
  100% { transform: scale(1) translate(0,0); }
}

/* estela fantasma del camino de la última jugada */
.trailDot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  margin: -5px 0 0 -5px; opacity: 0; box-shadow: 0 1px 3px rgba(46,74,78,.25);
  animation: trailFade var(--trail-ms, 2000ms) ease-out forwards;
}
@keyframes trailFade {
  0% { opacity: 0; transform: scale(.4); }
  12% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(.55); }
}

/* texto flotante de combo en colisiones encadenadas */
.comboText {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 20px; font-weight: 900; color: var(--mustard);
  -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 3px 0 var(--ink);
  animation: comboRise .85s cubic-bezier(.3,1.3,.5,1) forwards; white-space: nowrap;
}
@keyframes comboRise {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%,-80%) scale(1.15) rotate(2deg); }
  70% { opacity: 1; transform: translate(-50%,-140%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-190%) scale(.85); }
}

/* vista previa de la jugada: styles/features.css (#previewSvg) */

/* animaciones de reposo (idle): pelotas respiran, hoyo hace de baliza */
#pieces.idle .piece.pball:not(.sunk) .cardOnCell { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
#pieces.idle .piece.sunk .cardOnCell { animation: breatheF 2.6s ease-in-out infinite; }
@keyframes breatheF { 0%,100% { filter: saturate(.85) brightness(1); } 50% { filter: saturate(.9) brightness(1.12); } }
#pieces.idle .piece.phole:not(.sunk) .cardOnCell { animation: holeBeacon 2.8s ease-in-out infinite; }
@keyframes holeBeacon {
  0%,100% { filter: drop-shadow(0 0 0 rgba(255,208,107,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255,208,107,.95)); }
}

/* etiqueta ⏪ del rebobinado */
#rewindTag {
  position: absolute; top: 8px; left: 8px; z-index: 9; pointer-events: none;
  background: rgba(39,68,75,.92); color: #fff; font-size: 13px; font-weight: 900;
  padding: 5px 12px; border-radius: 999px; letter-spacing: .5px; opacity: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
#rewindTag.go { animation: rewindTag .7s ease-out; }
@keyframes rewindTag { 0% { opacity: 0; transform: translateY(-8px); } 20% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; } }
.piece.rewindFx .cardOnCell { animation: rewindHue .34s linear; }
@keyframes rewindHue {
  0% { filter: hue-rotate(0) blur(1px); }
  50% { filter: hue-rotate(140deg) saturate(1.6) blur(1px); }
  100% { filter: hue-rotate(0) blur(0); }
}

/* movimiento reducido: elimina lo decorativo, conserva lo funcional */
@media (prefers-reduced-motion: reduce) {
  .mClouds, .mFlag, .mShine, .mTree, .mBallMenu, .mTitle,
  .cell.selectable, .cell.selectable-out,
  #jaque.visible, #winOverlay.visible .box, .piece.glide .cardOnCell,
  .turnPulse, #boardArea.zoomPulse, #boardArea.zoomShake,
  .card.ctaJaque, .jaqueCtaTag, #endTurnBtn.ctaEndTurn,
  #pieces.idle .piece .cardOnCell, .piece.rewindFx .cardOnCell { animation: none !important; }
  #gameScreen, #editorScreen, #storyScreen, .lvlBtn, .card.dealIn { animation-duration: .01s !important; }
}

/* ==================== ajustes de la dirección de arte "club de golf aéreo" ====================
   (sobrescriben los de arriba; las animaciones de movimiento se mantienen) */
.piece.pball::before { display: none; }                 /* la bola ya lleva su sombra plana diagonal */
.piece .cardOnCell { filter: none; }
.piece.warp .cardOnCell { filter: drop-shadow(0 0 8px rgba(45,79,124,.9)) brightness(1.1); }
.piece.sunk .cardOnCell { filter: saturate(.9); }
.piece.sunk::after { background: var(--sand); box-shadow: inset 0 2px 0 var(--sand-hi); border-radius: 50% 50% 40% 40%; }
#boardFlash { background: rgba(241,241,220,.85); }
#menuScreen .mContent, #gameScreen, #editorScreen, #storyScreen { animation: screenIn .3s var(--ease-out); }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cell.edFlash { animation: edFlashSoft .35s var(--ease-out); }
@keyframes edFlashSoft { from { box-shadow: inset 0 0 0 3px var(--accent); } to { box-shadow: inset 0 0 0 0 transparent; } }
.trailDot { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 2px 2px 0 var(--shadow); }
.comboText {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  -webkit-text-stroke: 0; text-shadow: none;
  background: var(--cream); padding: 4px 12px; border-radius: 999px; box-shadow: 4px 4px 0 var(--shadow);
  animation: comboSoft .85s var(--ease-out) forwards;
}
@keyframes comboSoft {
  0% { opacity: 0; transform: translate(-50%, -30%); }
  20% { opacity: 1; transform: translate(-50%, -90%); }
  75% { opacity: 1; transform: translate(-50%, -120%); }
  100% { opacity: 0; transform: translate(-50%, -150%); }
}
#rewindTag {
  display: flex; align-items: center; gap: 6px;
  background: rgba(36,36,36,.86); color: var(--cream); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  box-shadow: 4px 4px 0 var(--shadow);
}
#pieces.idle .piece.phole:not(.sunk) .cardOnCell { animation: none; }

/* caída del tablero: el tramo del borde por el que sale la pieza destella y una onda sale hacia fuera */
.edgeFall { position: absolute; width: var(--len); height: 6px; margin: -3px 0 0 calc(var(--len) / -2); border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ec) 30%, #fff) 30%, color-mix(in srgb, var(--ec) 30%, #fff) 70%, transparent);
  box-shadow: 0 0 10px 3px var(--ec), 0 0 22px 6px color-mix(in srgb, var(--ec) 55%, transparent);
  animation: edgeFall .75s cubic-bezier(.2,.8,.3,1) both; }
.edgeFall[data-dir="left"], .edgeFall[data-dir="right"] { width: 6px; height: var(--len); margin: calc(var(--len) / -2) 0 0 -3px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ec) 30%, #fff) 30%, color-mix(in srgb, var(--ec) 30%, #fff) 70%, transparent); }
@keyframes edgeFall { 0% { opacity: 0; scale: .2 1; } 22% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1.35 .5; } }
.edgeFall[data-dir="left"], .edgeFall[data-dir="right"] { animation-name: edgeFallV; }
@keyframes edgeFallV { 0% { opacity: 0; scale: 1 .2; } 22% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: .5 1.35; } }
/* onda: media luna que se abre hacia dentro del tablero desde el punto de caída */
.edgeRipple { position: absolute; width: var(--len); height: var(--len); margin: calc(var(--len) / -2) 0 0 calc(var(--len) / -2);
  border-radius: 50%; border: 2.5px solid var(--ec); pointer-events: none; opacity: 0;
  animation: edgeRipple .8s .05s ease-out both; }
.edgeRipple[data-dir="up"] { clip-path: inset(50% 0 0 0); }
.edgeRipple[data-dir="down"] { clip-path: inset(0 0 50% 0); }
.edgeRipple[data-dir="left"] { clip-path: inset(0 0 0 50%); }
.edgeRipple[data-dir="right"] { clip-path: inset(0 50% 0 0); }
@keyframes edgeRipple { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.25); } }
.edgeFall.still { animation: edgeFallStill .6s ease-out both; }
@keyframes edgeFallStill { 0% { opacity: 1; } 100% { opacity: 0; } }
/* resplandor del color de la pieza que entra desde el borde de la caída */
.edgeGlow { position: absolute; pointer-events: none; mix-blend-mode: screen; animation: edgeGlow .8s ease-out both; }
.edgeGlow[data-dir="up"] { left: 0; top: 0; width: var(--bw); height: var(--depth);
  background: radial-gradient(ellipse calc(var(--depth) * 1.3) var(--depth) at var(--fx) 0, color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
.edgeGlow[data-dir="down"] { left: 0; top: calc(var(--bh) - var(--depth)); width: var(--bw); height: var(--depth);
  background: radial-gradient(ellipse calc(var(--depth) * 1.3) var(--depth) at var(--fx) 100%, color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
.edgeGlow[data-dir="left"] { left: 0; top: 0; width: var(--depth); height: var(--bh);
  background: radial-gradient(ellipse var(--depth) calc(var(--depth) * 1.3) at 0 var(--fx), color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
.edgeGlow[data-dir="right"] { left: calc(var(--bw) - var(--depth)); top: 0; width: var(--depth); height: var(--bh);
  background: radial-gradient(ellipse var(--depth) calc(var(--depth) * 1.3) at 100% var(--fx), color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
@keyframes edgeGlow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.edgeGlow.still { animation-duration: .6s; }