/* pos-v2.css — Pass or Smash V2 (swipe V/F) portado a la copia viva (2-sep-2026).
   Móvil-first 360→430px, viewport completo con safe-areas iOS. Sin marco .phone.
   Tokens de color/tipografía: ../css/styles.css (--gold, --red, --font-display,
   --font-body). Aquí NO se redefine :root global: solo tokens con prefijo --pos-.
   Física de swipe: games/passorsmash/swipe.js (spring + fling, transform en .card).
   Juice: js/juice.js. Animaciones SOLO transform/opacity. */

:root {
  --pos-gold: var(--gold, #d4a843);
  --pos-gold-hot: var(--gold-light, #efd28a);
  --pos-red: var(--red, #ff3b3b);
  --pos-red-hot: #ff6b6b;
  --pos-green: #2D8B4E;        /* verde acierto de la identidad */
  --pos-green-hot: #6effb0;
  --pos-ink: #060608;          /* void */
  --pos-bone: #f3e7c7;
  --pos-muted: #9c8c63;
}

html, body { height: 100%; }
body {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  background:
    radial-gradient(120% 70% at 50% 4%, #1a1408 0%, #0f0b05 42%, var(--pos-ink) 100%),
    var(--pos-ink);
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Layout raíz ──
   padding-top deja sitio al botón Volver global (vp-back.js: fixed, 38px alto,
   arriba-izquierda) y al botón de silencio (sound.js: arriba-derecha). */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding:
    calc(54px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  gap: 8px;
  max-width: 520px; margin: 0 auto;
}

/* ── Topbar ── */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.streak { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--pos-bone); }
.streak b { color: var(--pos-gold-hot); min-width: 1ch; display: inline-block; }
.streak.pulse b { animation: streakPulse .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes streakPulse { 0% { transform: scale(1); } 45% { transform: scale(1.5); color: #fff; } 100% { transform: scale(1); } }
.brand { text-align: center; }
.brand .b1 { font-family: var(--font-display, 'Playfair Display', serif); font-weight: 800; letter-spacing: .12em; font-size: 13px; color: var(--pos-gold-hot); }
.brand .b2 { font-size: 8px; letter-spacing: .32em; color: var(--pos-muted); font-weight: 700; margin-top: 1px; }
.points { text-align: right; font-size: 12px; color: #cdbd94; font-weight: 700; }
.points b { color: var(--pos-bone); }

/* x2 badge */
.x2badge {
  display: none; text-align: center; font-family: 'Archivo Black', var(--font-display, serif), sans-serif;
  font-size: 12px; letter-spacing: .1em; color: #2a1500; font-weight: 900;
  background: linear-gradient(180deg, var(--pos-gold-hot), #c8951e); border-radius: 999px;
  padding: 3px 12px; box-shadow: 0 0 18px rgba(212,168,67,.55); align-self: center;
  animation: x2pulse 1s ease-in-out infinite;
}
.x2badge.show { display: inline-block; }
@keyframes x2pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* progreso de ronda (scaleX: compositor, no layout) */
.progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 100%; border-radius: 999px; transform-origin: left center;
  transform: scaleX(0); background: linear-gradient(90deg, var(--pos-gold), var(--pos-gold-hot));
  transition: transform .35s cubic-bezier(.22,1,.36,1); }

.subtitle { text-align: center; font-family: var(--font-display, 'Playfair Display', serif); font-style: italic; font-weight: 700;
  font-size: 17px; color: var(--pos-gold-hot); text-shadow: 0 2px 14px rgba(212,168,67,.4); }

/* ── Mazo ── */
.deck { position: relative; flex: 1; margin: 4px 2px 2px; min-height: 0; }
/* El SLOT centra y aplica la profundidad del mazo (transform del wrapper);
   la física (swipe.js) escribe translateX/rotate crudo sobre .card sin pelearse con el centrado. */
.card-slot { position: absolute; left: 50%; top: 50%; width: 90%; max-width: 380px; aspect-ratio: 0.74;
  will-change: transform; }
.card { position: absolute; inset: 0; will-change: transform; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; }
.card.swipe-dragging { cursor: grabbing; }
.card-inner {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  background: linear-gradient(168deg, #1d1810, #120d07 60%, #0a0705);
  box-shadow: 0 24px 56px rgba(0,0,0,.6), 0 0 0 1.5px rgba(212,168,67,.6), 0 0 26px rgba(212,168,67,.14);
  display: flex; flex-direction: column; align-items: center; padding: 5% 5% 6%;
}
.card-inner::before { content: ""; position: absolute; inset: 8px; border-radius: 17px;
  border: 1px solid rgba(212,168,67,.22); pointer-events: none; z-index: 3; }
/* La carta que llega sube del mazo: se anima .card-inner, NUNCA .card (swipe.js
   escribe transform inline sobre .card y una animación CSS lo pisaría). */
@keyframes posCardIn {
  from { transform: translate3d(0, 26px, 0) scale(.94) rotate(-2.5deg); }
  to   { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}
/* Sin opacity a propósito: la carta de detrás se leería a través de la que entra. */
.card-inner.pos-in { animation: posCardIn .38s cubic-bezier(.22, 1, .36, 1) both; }
.card-photo { width: 100%; aspect-ratio: 16/11; border-radius: 15px; background: #0b0a06 center/contain no-repeat;
  flex: none; box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(212,168,67,.35); }
.card-photo.empty { display: none; }
.card-stmt { color: #fff; text-align: center; font-weight: 800; font-size: clamp(15px, 4.4vw, 21px); line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0,0,0,.7); flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 8px 2%; }
.card-tema { flex: none; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(212,168,67,.6); font-weight: 800; }
.card-retry { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 9px; letter-spacing: .14em; font-weight: 900; color: var(--pos-gold-hot);
  background: rgba(6,6,8,.7); border: 1px solid rgba(212,168,67,.4); border-radius: 999px; padding: 3px 9px; }

/* carta x2 */
.card.is-x2 .card-inner { box-shadow: 0 24px 56px rgba(0,0,0,.6), 0 0 0 2px var(--pos-gold-hot), 0 0 34px rgba(212,168,67,.5); }

/* sellos ✓/✗ */
.stamp { position: absolute; top: 9%; z-index: 5; font-family: 'Archivo Black', var(--font-display, serif), sans-serif; font-weight: 900;
  font-size: 22px; letter-spacing: .04em; padding: 6px 13px; border-radius: 10px; border: 4px solid; opacity: 0; }
.stamp.smash { right: 8%; color: var(--pos-green-hot); border-color: var(--pos-green); transform: rotate(-13deg) scale(1.08);
  text-shadow: 0 0 12px rgba(45,139,78,.7); }
.stamp.pass { left: 8%; color: var(--pos-red-hot); border-color: var(--pos-red); transform: rotate(13deg) scale(1.08);
  text-shadow: 0 0 12px rgba(255,59,59,.6); }

/* onboarding: flechas fantasma */
/* Scoped a #deck (1-oct): la clase suelta «.ghost» pisaba el botón «Volver» de los avisos comunes (.fg-btn.ghost de free-gate): salía encima del título, sin poder pulsarse. */
#deck .ghost { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: none;
  align-items: flex-end; justify-content: space-between; padding: 0 6% 12%; }
#deck .ghost.show { display: flex; }
#deck .ghost .g { text-align: center; font-weight: 900; font-size: 13px; letter-spacing: .04em; opacity: .9;
  animation: ghostPulse 1.1s ease-in-out infinite; }
#deck .ghost .g .arw { font-size: 34px; display: block; line-height: 1; }
#deck .ghost .g.f { color: var(--pos-red-hot); --dx: -8px; }
#deck .ghost .g.v { color: var(--pos-green-hot); --dx: 8px; animation-delay: .55s; }
@keyframes ghostPulse { 0%,100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(var(--dx,0)); opacity: 1; } }

/* ── Controles (.pos-btn: styles.css ya define un .btn genérico de bloque) ── */
.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 8px; padding: 2px 4px; }
.swipehint { text-align: center; color: #8b825f; font-size: 12px; font-weight: 600; line-height: 1.2; }
.swipehint span { opacity: .7; }
.pos-btn { width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 30px; color: #fff; transition: transform .1s; -webkit-tap-highlight-color: transparent; }
.pos-btn:active { transform: scale(.9); }
.pos-btn.pass { background: radial-gradient(circle at 40% 35%, #ff5a5a, #8f1616);
  box-shadow: 0 0 22px rgba(255,59,59,.5), inset 0 2px 4px rgba(255,255,255,.3); }
.pos-btn.smash { background: radial-gradient(circle at 40% 35%, #5cf0a0, #1f7a44);
  box-shadow: 0 0 22px rgba(45,139,78,.55), inset 0 2px 4px rgba(255,255,255,.3); }
.btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.btn-lbl { font-weight: 900; font-size: 13px; letter-spacing: .04em; }
.btn-lbl.pass { color: var(--pos-red-hot); } .btn-lbl.smash { color: #4fe08c; }
.btn-sub { font-size: 9px; letter-spacing: .12em; color: #9c948a; font-weight: 700; }

/* número flotante de puntos */
.floatpts { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 42; pointer-events: none;
  font-family: 'Archivo Black', var(--font-display, serif), sans-serif; font-weight: 900; font-size: 30px; color: var(--pos-green-hot);
  text-shadow: 0 0 20px rgba(45,139,78,.7); opacity: 0; }
.floatpts.go { animation: floatUp .8s ease-out forwards; }
.floatpts.x2 { color: var(--pos-gold-hot); text-shadow: 0 0 22px rgba(212,168,67,.8); }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 20% { opacity: 1; transform: translate(-50%,-56%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-96%) scale(1); } }

.fbmini { position: absolute; left: 50%; top: 34%; transform: translate(-50%,-50%) scale(.6); z-index: 40; opacity: 0;
  text-align: center; pointer-events: none; font-family: 'Archivo Black', var(--font-display, serif), sans-serif; font-weight: 900; font-size: 24px;
  color: var(--pos-green-hot); text-shadow: 0 0 24px rgba(45,139,78,.8); transition: opacity .18s, transform .18s; }
.fbmini.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.fbmini .sub { font-family: var(--font-body, 'Inter', sans-serif); font-size: 12px; font-weight: 800; margin-top: 5px; color: var(--pos-bone); }


/* ── FALLASTE (feedback correctivo obligatorio, tap explícito) ── */
.fail { position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; align-items: center;
  padding: calc(8% + env(safe-area-inset-top)) 7% calc(6% + env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% 30%, rgba(70,9,9,.96), rgba(10,3,3,.99));
  overflow-y: auto; }
.fail.show { display: flex; animation: failIn .28s ease both; }
@keyframes failIn { from { opacity: 0; } to { opacity: 1; } }
.fail-title { font-family: 'Archivo Black', var(--font-display, serif), sans-serif; font-weight: 900; font-size: clamp(30px,10vw,46px); color: #ff5a4a;
  text-shadow: 0 0 30px rgba(255,40,40,.8), 0 4px 8px rgba(0,0,0,.6); letter-spacing: .02em; margin-top: 6px;
  animation: failPop .5s cubic-bezier(.34,1.56,.64,1) both; text-align: center; }
@keyframes failPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }

/* carta volteada mostrando el ENUNCIADO VERDADERO */
.truth-card { width: 100%; max-width: 420px; margin: 16px 0 4px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(168deg, #16241a, #0d160f 70%); border: 1.5px solid rgba(45,139,78,.6);
  box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(45,139,78,.2); padding: 16px 16px 18px;
  animation: flipIn .5s .1s cubic-bezier(.34,1.4,.5,1) both; }
@keyframes flipIn { 0% { transform: perspective(700px) rotateY(90deg) scale(.9); opacity: 0; }
  100% { transform: perspective(700px) rotateY(0) scale(1); opacity: 1; } }

.fail-santi-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 420px; margin-top: 12px; }
.fail-santi { width: 64px; flex: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.fail-santi-bubble { flex: 1; background: #f4efe6; color: #1a1512; border-radius: 14px; border-bottom-left-radius: 4px;
  padding: 10px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.34; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.fail-santi-bubble .who { color: #c1121f; font-weight: 900; font-size: 12px; margin-bottom: 2px; }

.entendido { width: 100%; max-width: 420px; border: none; border-radius: 14px; padding: 15px; font-weight: 900; font-size: 15px;
  letter-spacing: .06em; cursor: pointer; margin-top: 16px; min-height: 48px;
  background: #3a1414; color: rgba(255,255,255,.55); box-shadow: none;
  pointer-events: none; transition: background .3s, color .3s, box-shadow .3s; }
.entendido.ready { background: linear-gradient(180deg, #ff6b6b, #b02020); color: #fff;
  box-shadow: 0 10px 26px rgba(255,59,59,.35); pointer-events: auto; }
.entendido:active { transform: scale(.98); }

/* ── FIN DE RONDA ── */
.final { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 11px; padding: calc(54px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));
  background: radial-gradient(85% 50% at 50% 10%, rgba(96,68,16,.55), transparent 62%),
    radial-gradient(120% 92% at 50% 34%, rgba(28,19,6,.94), var(--pos-ink)); overflow-y: auto; }
.final.show { display: flex; animation: failIn .35s ease both; }
.final > * { position: relative; z-index: 1; }

/* "Las que fallaste": recap con veredicto + explicación (máx. 6 visibles, resto plegado) */
.failed-wrap { width: 100%; max-width: 420px; display: none; flex-direction: column; gap: 6px; }
.failed-wrap.show { display: flex; }
.failed-h { font-size: 10px; letter-spacing: .16em; color: #a99a76; font-weight: 800; margin-top: 2px; }
.failed-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.failed-item { background: rgba(255,59,59,.1); border-left: 3px solid var(--pos-red); border-radius: 8px; padding: 7px 10px; text-align: left; }
.failed-item.folded { display: none; }
.failed-wrap.open .failed-item.folded { display: block; }
.failed-item .fq { font-size: 11.5px; font-weight: 700; color: var(--pos-bone); line-height: 1.25; }
.failed-item .fa { font-size: 11px; color: #8effc0; margin-top: 2px; font-weight: 800; }
.failed-item .fa.no { color: #ff8a8a; }
.failed-item .fe { font-size: 10.5px; color: #cdbd94; margin-top: 2px; line-height: 1.3; }
.failed-more { align-self: center; border: 1px solid rgba(212,168,67,.35); background: rgba(6,6,8,.5); color: var(--pos-gold-hot);
  border-radius: 999px; padding: 6px 14px; font-size: 11px; font-weight: 800; letter-spacing: .06em; cursor: pointer; display: none; min-height: 32px; }
.failed-more.show { display: inline-block; }
.failed-wrap.open .failed-more { display: none; }

.again { width: 100%; max-width: 420px; border: none; border-radius: 14px; padding: 15px; font-weight: 900; font-size: 15px;
  letter-spacing: .06em; cursor: pointer; color: #2a1500; min-height: 48px;
  background: linear-gradient(180deg, var(--pos-gold-hot), #c8951e); box-shadow: 0 10px 26px rgba(212,168,67,.35); }
.again:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}