/* pos-feel.css — Pass or Smash con «toque de juego» (29-sep-2026).
 * Los momentos los marca games/passorsmash/feel.js; aquí cómo se mueven
 * (vocabulario en css/juego-feel.css). Regla de oro de este juego: la carta
 * (.card) la mueve el dedo con `transform` en línea; aquí NUNCA se anima .card,
 * solo .card-inner y con propiedades sueltas (scale/translate/rotate), que se
 * suman al arrastre en vez de pisarlo.
 */

/* ═════════ REPARTO: empieza la ronda y la carta cae sobre la mesa ═════════ */
body.pos-reparte .card-slot:last-of-type .card-inner.pos-in { animation: posReparte .62s cubic-bezier(.2,.9,.3,1.12) .12s both; }
@keyframes posReparte {
  0%   { opacity: 0; translate: 0 -70%; rotate: -12deg; scale: .55; }
  62%  { opacity: 1; translate: 0 3%;   rotate: 2deg;   scale: 1.04; }
  82%  { translate: 0 -1%; rotate: -.6deg; scale: .99; }
  100% { opacity: 1; translate: 0 0;    rotate: 0deg;   scale: 1; }
}
body.pos-reparte .topbar > * { animation: jfCae .45s cubic-bezier(.2,.9,.3,1) both; }
body.pos-reparte .topbar > :nth-child(2) { animation-delay: .06s; }
body.pos-reparte .topbar > :nth-child(3) { animation-delay: .12s; }
body.pos-reparte .progress { transform-origin: left center; animation: posBarra .5s cubic-bezier(.2,.9,.3,1) .18s both; }
@keyframes posBarra { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }
body.pos-reparte .btn-wrap { animation: jfPop .5s cubic-bezier(.3,1.5,.5,1) .5s both; }
body.pos-reparte .btn-wrap:last-child { animation-delay: .6s; }

/* cada carta nueva sube del mazo, se pasa un pelo y asienta */
.card-inner.pos-in { animation: posSube .36s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes posSube { 0% { opacity: 0; translate: 0 16px; scale: .9; } 70% { opacity: 1; scale: 1.025; } 100% { opacity: 1; translate: 0 0; scale: 1; } }

/* al cogerla con el dedo, la carta se levanta */
.card .card-inner { transition: scale .18s cubic-bezier(.3,1.5,.5,1); }
.card.swipe-dragging .card-inner { scale: 1.035; }

/* ═════════ EL SELLO: PASS o SMASH se estampa sobre la mesa ═════════ */
.pos-sello { position: fixed; z-index: 45; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font: 900 calc(clamp(34px, 12vw, 58px) * var(--pos-k, 1))/1 var(--pos-fd, 'Syne'), 'Archivo Black', sans-serif; letter-spacing: .06em;
  padding: .12em .42em .16em; border-radius: 12px; border: 5px solid currentColor;
  background: rgba(8,6,10,.55); text-shadow: 0 0 22px currentColor, 0 3px 0 rgba(0,0,0,.6); box-shadow: 0 0 26px currentColor, inset 0 0 18px currentColor; }
.pos-sello.smash { color: #5eff9c; }
.pos-sello.pass  { color: #ff6b5e; }
.pos-sello.jf-on { animation: jfSello .38s cubic-bezier(.2,1.4,.4,1) both, posSelloFuera .26s ease-in .56s forwards; }
@keyframes posSelloFuera { from { opacity: 1; } to { opacity: 0; scale: 1.12; rotate: -10deg; } }

/* la cúpula que has votado se enciende */
.pos-btn.pos-encendida::before { animation: posCupula .55s ease-out both; }
@keyframes posCupula { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.pos-btn.pos-encendida { animation: posPulsa .36s cubic-bezier(.3,1.6,.5,1); }
@keyframes posPulsa { 0% { scale: .9; } 55% { scale: 1.07; } 100% { scale: 1; } }

/* ═════════ RACHA ═════════ */
.streak { position: relative; }
.streak::after { content: ""; position: absolute; inset: -3px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 14px 3px rgba(255,140,40,.8), inset 0 0 10px rgba(255,160,60,.6);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.streak.pos-racha-on::after { animation: jfHalo 1s ease-in-out infinite; }
.streak.pos-racha-on b { scale: 1.18; display: inline-block; }
/* RACHA ×2 cae como un sello y después sigue latiendo */
.x2badge.show { animation: jfSlam .5s cubic-bezier(.3,1.3,.5,1) both, x2pulse 1s ease-in-out .5s infinite; }

/* ═════════ ¡FALLASTE! ═════════ */
.fail.show .fail-title { animation: posFallaste .5s cubic-bezier(.3,1.35,.5,1) both; }
@keyframes posFallaste { 0% { opacity: 0; transform: scale(2.4) rotate(-6deg); } 55% { opacity: 1; transform: scale(.9) rotate(1.5deg); } 78% { transform: scale(1.05) rotate(-.5deg); } 100% { opacity: 1; transform: none; } }
.fail.show .fail-santi-row { animation: jfDeIzq .45s cubic-bezier(.2,.9,.3,1.15) .35s both; }
.fail.show .entendido { animation: jfSube .45s cubic-bezier(.2,.9,.3,1.2) .45s both; }
.fail.show .entendido.ready { animation: jfSube .45s cubic-bezier(.2,.9,.3,1.2) .45s both, jfLatido 1.5s ease-in-out 1s infinite; }

/* ═════════ FIN DE RONDA ═════════ */
/* la entrada del «Abanico» vive en css/pos-fin2.css; esto es el botón y «Las que fallaste» */
.final.show .again { animation: jfSube .5s cubic-bezier(.2,.9,.3,1.25) .9s both, jfLatido 1.6s ease-in-out 1.5s infinite; }
.final.show .failed-wrap.show { animation: jfSube .45s cubic-bezier(.2,.9,.3,1.1) 1.02s both; }

/* «Las que fallaste»: sin «Era VERDADERO / FALSO» escrito (Nico, 29-sep): lo
   dice el color del filo, verde si la afirmación era verdadera, rojo si no */
.final .failed-item.es-v { border-left-color: #2D8B4E; }
.final .failed-item.es-f { border-left-color: #ff3b3b; }

@media (prefers-reduced-motion: reduce) {
  body.pos-reparte *, .card-inner.pos-in, .pos-sello, .pos-btn, .pos-btn::before, .streak::after, .x2badge.show,
  .fail.show .fail-title, .fail.show .fail-santi-row, .fail.show .entendido,
  .final.show .again, .final.show .failed-wrap { animation: none !important; }
  .pos-sello { display: none; }
  .card .card-inner { transition: none; }
}