/* pos-pistas.css — Pass or Smash: las pistas del arrastre (?pistas=1|2|3; games/passorsmash/pistas.js).
 * Sustituyen a las flechas fantasma «← FALSO / VERDADERO →» que bailaban en bucle sobre la carta.
 * Colores = los de los botones y el sello del juego: SMASH #5eff9c (brillo #22c55e) · PASS #ff6b5e (brillo #ff3b3b).
 * Tipografía = la del Abanico (Syne 800 en cursiva, inclinada -9°). Letra ≥15 px lo que se lee, ≥12 px etiquetas.
 * Lo que cambia mientras arrastras lo pone pistas.js y es SOLO opacity/transform (60 fps). */

.pos-pistas { --pp-s: #5eff9c; --pp-s2: #22c55e; --pp-p: #ff6b5e; --pp-p2: #ff3b3b; }
/* fuera lo de antes: las flechas que bailaban y el sello VERDADERO/FALSO que se cortaba en el filo */
.pos-pistas .card .stamp, .pos-pistas #deck .ghost { display: none !important; }

/* ═══════════ 1 y 3 · la carta se tiñe y asoma el sello ═══════════ */
/* el tinte va por encima de la foto y por debajo de la frase y del tema, que se siguen leyendo */
.pos-pistas .card-inner > .card-stmt, .pos-pistas .card-inner > .card-tema, .pos-pistas .card-inner > .card-retry { z-index: 2; }
.card-inner > .pp-tinte { position: absolute; inset: 9px; z-index: 1; border-radius: 14px; pointer-events: none; opacity: 0; }
.card-inner > .pp-tinte.s {
  background: linear-gradient(270deg, rgba(34,197,94,.62) 0%, rgba(34,197,94,.22) 42%, rgba(34,197,94,0) 78%),
    repeating-linear-gradient(-62deg, transparent 0 26px, rgba(94,255,156,.13) 26px 30px, transparent 30px 60px);
  box-shadow: inset 0 0 0 2px rgba(94,255,156,.85), inset 0 0 46px rgba(34,197,94,.55); }
.card-inner > .pp-tinte.p {
  background: linear-gradient(90deg, rgba(255,59,59,.62) 0%, rgba(255,59,59,.22) 42%, rgba(255,59,59,0) 78%),
    repeating-linear-gradient(62deg, transparent 0 26px, rgba(255,107,94,.13) 26px 30px, transparent 30px 60px);
  box-shadow: inset 0 0 0 2px rgba(255,107,94,.85), inset 0 0 46px rgba(255,59,59,.55); }

/* el sello: en la esquina contraria al lado al que va la carta (así queda a la vista), como en Tinder,
   montado sobre el filo de arriba del marco para no tapar la frase */
.card-inner > .pp-sello { position: absolute; top: calc(-14px * var(--pos-k, 1)); z-index: 3; pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.card-inner > .pp-sello.s { left: 7%; }
.card-inner > .pp-sello.p { right: 7%; }
.pp-sello-in { display: flex; align-items: center; gap: calc(9px * var(--pos-k, 1)); padding: calc(6px * var(--pos-k, 1)) calc(15px * var(--pos-k, 1)) calc(6px * var(--pos-k, 1)) calc(7px * var(--pos-k, 1));
  border: 3px solid var(--c); border-radius: 10px; transform: skewX(-9deg); background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 30%, #07090b), rgba(6,6,9,.9));
  box-shadow: 0 0 22px -2px var(--c2), inset 0 0 16px color-mix(in srgb, var(--c2) 40%, transparent), 0 10px 20px rgba(0,0,0,.55); }
.pp-sello.s .pp-sello-in { --c: var(--pp-s); --c2: var(--pp-s2); }
.pp-sello.p .pp-sello-in { --c: var(--pp-p); --c2: var(--pp-p2); flex-direction: row-reverse; padding: calc(6px * var(--pos-k, 1)) calc(7px * var(--pos-k, 1)) calc(6px * var(--pos-k, 1)) calc(15px * var(--pos-k, 1)); }
.pp-sello-txt { display: flex; flex-direction: column; align-items: flex-start; transform: skewX(9deg); }
.pp-sello.p .pp-sello-txt { align-items: flex-end; }
.pp-sello-txt b { font: 800 italic calc(25px * var(--pos-k, 1))/.95 var(--pos-fd, 'Syne'), sans-serif; letter-spacing: .02em; color: var(--c);
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--c2) 45%, #000), 0 0 18px color-mix(in srgb, var(--c2) 80%, transparent); }
.pp-sello-txt small { margin-top: 3px; font: 800 calc(12px * var(--pos-k, 1))/1 var(--pos-fb, 'DM Sans'), sans-serif; letter-spacing: .18em; color: #f4f1ea; }

/* el icono redondo es el de los botones arcade del juego (✖ rojo / ✔ verde) */
.pp-ico { flex: none; display: grid; place-items: center; width: calc(32px * var(--pos-k, 1)); height: calc(32px * var(--pos-k, 1)); border-radius: 50%;
  font: 900 calc(16px * var(--pos-k, 1))/1 var(--pos-fb, 'DM Sans'), sans-serif; color: #fff; transform: skewX(9deg);
  background: radial-gradient(circle at 38% 32%, #8dffbd, #1fae55 55%, #0b5a2a); box-shadow: 0 0 0 2px #f3d27a, 0 0 14px rgba(34,197,94,.8), inset 0 2px 3px rgba(255,255,255,.45); }
.p > .pp-ico, .pp-sello.p .pp-ico, .pp-placa.p .pp-ico {
  background: radial-gradient(circle at 38% 32%, #ff8a7a, #d42a1e 55%, #7a0f0a); box-shadow: 0 0 0 2px #f3d27a, 0 0 14px rgba(255,59,59,.8), inset 0 2px 3px rgba(255,255,255,.45); }

/* al cruzar el punto de decidir, el sello da un golpe seco (scale suelto: no pisa el transform que pone pistas.js) */
.pp-sello.pp-arma .pp-sello-in { animation: ppGolpe .3s cubic-bezier(.3,1.7,.5,1); }
@keyframes ppGolpe { 0% { scale: 1; } 40% { scale: 1.16; } 100% { scale: 1; } }

/* ═══════════ 1 · el borde de la pantalla de ese lado se enciende ═══════════ */
.pp-borde { position: fixed; top: 0; bottom: 0; width: 42vw; z-index: 4; pointer-events: none; opacity: 0; overflow: hidden; will-change: opacity; }
.pp-borde.p { left: 0; }
.pp-borde.s { right: 0; }
.pp-borde-luz { position: absolute; inset: 0; }
.pp-borde.s .pp-borde-luz { background: radial-gradient(70% 46% at 100% 46%, rgba(34,197,94,.5), rgba(34,197,94,.14) 55%, transparent 75%),
  linear-gradient(270deg, rgba(94,255,156,.95) 0, rgba(94,255,156,.95) 3px, rgba(34,197,94,.35) 4px, transparent 34px); }
.pp-borde.p .pp-borde-luz { background: radial-gradient(70% 46% at 0% 46%, rgba(255,59,59,.5), rgba(255,59,59,.14) 55%, transparent 75%),
  linear-gradient(90deg, rgba(255,107,94,.95) 0, rgba(255,107,94,.95) 3px, rgba(255,59,59,.35) 4px, transparent 34px); }

/* ═══════════ 2 · las placas laterales ═══════════ */
.pp-placa { position: fixed; z-index: 4; width: calc(38px * var(--pos-k, 1)); height: calc(170px * var(--pos-k, 1)); pointer-events: none; }
.pp-placa-base, .pp-placa-luz { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(10px * var(--pos-k, 1));
  padding: calc(9px * var(--pos-k, 1)) 0; }
.pp-placa.p .pp-placa-base, .pp-placa.p .pp-placa-luz { clip-path: polygon(0 0, 100% 9%, 100% 91%, 0 100%); padding-right: 3px; }
.pp-placa.s .pp-placa-base, .pp-placa.s .pp-placa-luz { clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 91%); padding-left: 3px; }
/* en tablet, con sitio junto a la carta, la placa es una pieza entera (sin pegarse al borde) */
.pp-placas-fuera .pp-placa .pp-placa-base, .pp-placas-fuera .pp-placa .pp-placa-luz { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%); padding: calc(9px * var(--pos-k, 1)) 0; border-radius: 0; }
.pp-placas-fuera .pp-placa.p .pp-placa-base, .pp-placas-fuera .pp-placa.p .pp-placa-luz { clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%); }
/* apagada: metal oscuro como los chips del HUD, el color solo en el icono y el filo */
.pp-placa-base { background: linear-gradient(180deg, rgba(40,36,48,.94), rgba(12,11,16,.96)); }
.pp-placa.p .pp-placa-base { box-shadow: inset -2px 0 0 rgba(255,107,94,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.pp-placa.s .pp-placa-base { box-shadow: inset 2px 0 0 rgba(94,255,156,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.pp-placa-base .pp-pal, .pp-placa-base .pp-sub { opacity: .62; }
.pp-placa-base .pp-ico { opacity: .8; }
/* encendida: la placa entera del color del botón, como las cartas del Abanico */
.pp-placa-luz { opacity: 0; will-change: opacity; }
.pp-placa.s .pp-placa-luz { background: linear-gradient(160deg, #b9ffd6 0%, #2fd572 30%, #0e6a33 100%); }
.pp-placa.p .pp-placa-luz { background: linear-gradient(160deg, #ffc2b8 0%, #ff5a4a 30%, #8a1410 100%); }
.pp-placa-luz .pp-pal, .pp-placa-luz .pp-sub { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(0,0,0,.35); }
.pp-placa-luz .pp-ico { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.45); }
.pp-placa .pp-ico { transform: none; width: calc(28px * var(--pos-k, 1)); height: calc(28px * var(--pos-k, 1)); font-size: calc(15px * var(--pos-k, 1)); }
.pp-pal { writing-mode: vertical-rl; font: 800 italic calc(18px * var(--pos-k, 1))/1 var(--pos-fd, 'Syne'), sans-serif; letter-spacing: .06em; }
.pp-sub { writing-mode: vertical-rl; font: 800 calc(12px * var(--pos-k, 1))/1 var(--pos-fb, 'DM Sans'), sans-serif; letter-spacing: .14em; color: #f0ece4; }
.pp-placa.p .pp-pal, .pp-placa.p .pp-sub { transform: rotate(180deg); }
.pp-placa-base .pp-pal { color: var(--pp-p); }
.pp-placa.s .pp-placa-base .pp-pal { color: var(--pp-s); }
/* el filo de dentro se carga desde el centro según arrastras; lleno = suelta y decides */
.pp-carga { position: absolute; top: 9%; bottom: 9%; width: 3px; transform: scaleY(0); transform-origin: 50% 50%; will-change: transform; border-radius: 2px; }
.pp-placa.p .pp-carga { right: -5px; background: #ffd9d3; box-shadow: 0 0 8px var(--pp-p2), 0 0 2px #fff; }
.pp-placa.s .pp-carga { left: -5px; background: #d6ffe6; box-shadow: 0 0 8px var(--pp-s2), 0 0 2px #fff; }
.pp-placa.pp-arma { animation: ppPlaca .32s cubic-bezier(.3,1.7,.5,1); }
.pp-placa.p.pp-arma { transform-origin: 0 50%; }
.pp-placa.s.pp-arma { transform-origin: 100% 50%; }
@keyframes ppPlaca { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }
/* entran con el reparto y se quedan quietas */
body.pos-reparte .pp-placa { animation: ppEntra .45s cubic-bezier(.2,.9,.3,1.2) .55s both; }
body.pos-reparte .pp-placa.s { animation-delay: .62s; }
@keyframes ppEntra { from { opacity: 0; } to { opacity: 1; } }
body.pos-fail .pp-placa, body.pos-final .pp-placa, body.pos-fail .pp-borde, body.pos-final .pp-borde { visibility: hidden; }

/* ═══════════ 3 · la mano fantasma (solo la primera vez) ═══════════ */
.pp-mano { position: fixed; z-index: 6; width: calc(64px * var(--pos-k, 1)); height: calc(80px * var(--pos-k, 1)); pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform, opacity; }
.pp-mano.on { opacity: 1; }
.pp-mano-svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 0; transition: scale .16s ease;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(243,210,122,.45)); }
.pp-mano.pulsa .pp-mano-svg { scale: .9; }
.pp-mano-forma { fill: rgba(255,250,238,.96); stroke: #1a1005; stroke-width: 2.4; stroke-linejoin: round; }
.pp-mano-linea { fill: none; stroke: #1a1005; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.pp-mano-onda { position: absolute; left: 50%; top: 2px; width: calc(46px * var(--pos-k, 1)); height: calc(46px * var(--pos-k, 1)); margin: calc(-23px * var(--pos-k, 1)) 0 0 calc(-23px * var(--pos-k, 1));
  border-radius: 50%; border: 3px solid #f3d27a; box-shadow: 0 0 14px rgba(243,210,122,.8); opacity: 0; }
.pp-mano.pulsa .pp-mano-onda { animation: ppOnda .7s ease-out both; }
@keyframes ppOnda { 0% { opacity: .95; scale: .3; } 100% { opacity: 0; scale: 1.5; } }
.pp-mano-cap { position: fixed; left: 50%; z-index: 6; pointer-events: none; opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s ease, transform .3s ease;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: calc(9px * var(--pos-k, 1)) calc(20px * var(--pos-k, 1)); white-space: nowrap;
  background: linear-gradient(180deg, rgba(40,36,48,.95), rgba(10,9,14,.96)); box-shadow: inset 0 0 0 1.5px rgba(243,210,122,.6);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.pp-mano-cap.on { opacity: 1; transform: translate(-50%, 0); }
.pp-mano-cap > b { font: 800 italic calc(17px * var(--pos-k, 1))/1 var(--pos-fd, 'Syne'), sans-serif; letter-spacing: .06em; color: #f3d27a; }
.pp-mano-cap > span { font: 700 calc(15px * var(--pos-k, 1))/1.2 var(--pos-fb, 'DM Sans'), sans-serif; color: #f0ece4; }
.pp-mano-cap b.s { color: var(--pp-s); font: inherit; font-weight: 900; }
.pp-mano-cap b.p { color: var(--pp-p); font: inherit; font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  .pp-sello-in, .pp-placa, .pp-mano-onda { animation: none !important; }
  .pp-mano, .pp-mano-cap, .pp-mano-svg { transition: none; }
}