/* pos-v3.css — Pass or Smash como ESCENA (5-sep-2026, aprobado por Nico el 4-sep sobre games/dev-pos.html).
   Se carga DESPUÉS de pos-v2.css y solo cambia la capa visual: la lógica (pass-or-smash.js, swipe.js) y los ids
   siguen iguales. La escena es la consola arcade de una azotea (assets/passorsmash/escenas/consola.webp): las dos
   cúpulas (X roja, ✓ verde) SON los botones PASS y SMASH; la carta es un panel holográfico generado
   (ui/panel-gold.webp, con alfa, como border-image) que flota en el haz del proyector; al fallar, el panel rojo
   (ui/panel-red.webp) enseña la verdad en el mismo sitio. Fin de ronda sobre la escena de los montones (escenas/fin.webp).
   Las posiciones de mazo, botones y panel las fija games/passorsmash/escena.js por fracciones de la imagen. */

:root { --pos-fd: 'Syne', var(--font-display, sans-serif), sans-serif; --pos-fb: 'DM Sans', var(--font-body, sans-serif), sans-serif; }
body { background: #070608; font-family: var(--pos-fb); }
.pos-escena { position: fixed; inset: 0; z-index: 0; background-color: #0c0f17; background-repeat: no-repeat;
  /* 28-sep: la escena se ancla por abajo (escena.js); lo que queda por encima de la imagen es cielo:
     fundido (capa 1) + la consola (capa 2) + cielo con el haz del proyector (capa 3) */
  background-image: linear-gradient(180deg, #0c0f17, rgba(12,15,23,0)), url(../assets/passorsmash/escenas/consola.webp),
    linear-gradient(90deg, #0c0f17 0%, #0d1019 36%, #2c2622 50%, #0d1019 64%, #0c0f17 100%); }
.pos-velo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,5,8,.55) 0%, rgba(6,5,8,0) 12%, rgba(6,5,8,0) 84%, rgba(6,5,8,.85) 100%); }

/* ── pantalla: transparente sobre la escena; el HUD son chips de metal ── */
.screen { background: transparent; z-index: 2; pointer-events: none; padding-top: calc(76px + env(safe-area-inset-top)); }
.screen > * { pointer-events: auto; }
.topbar { gap: 6px; grid-template-columns: auto minmax(0, 1fr) auto; } /* los chips miden lo suyo y el título se queda el hueco (en 360 el de puntos se salía) */
.streak, .points { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font: 800 12px/1 var(--pos-fb); letter-spacing: .06em; text-transform: uppercase; color: #f0ece4;
  background: linear-gradient(180deg, rgba(40,36,48,.92), rgba(12,11,16,.95)); border: 1px solid rgba(212,168,67,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.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 b, .points b { font: 900 14px/1 var(--pos-fd); color: #f3d27a; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.points { justify-self: end; white-space: nowrap; }
.brand .b1 { font: 900 12px/1.1 var(--pos-fd); letter-spacing: .1em; color: #f3d27a; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.brand .b2 { color: #cdbd94; font: 700 12px/1 var(--pos-fb); letter-spacing: .2em; margin-top: 3px; white-space: nowrap; } /* 12 px: la etiqueta más pequeña que se lee en móvil (era 8) */
/* «RACHA ×2» flota sobre la línea de progreso sin empujarla: antes la bajaba 26 px y la carta la tapaba */
.x2badge { position: relative; z-index: 5; height: 26px; line-height: 20px; box-sizing: border-box; }
.x2badge.show { display: block; width: max-content; margin: 0 auto -26px; }
.progress { height: 5px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); }
.progress > i { background: linear-gradient(90deg, #f3d27a, #d4a843); box-shadow: 0 0 8px rgba(243,210,122,.8); }
.subtitle { display: none; }

/* ── el mazo, en el haz del proyector (geometría por JS) ── */
.deck { position: fixed; margin: 0; flex: none; z-index: 3; }
.card-slot { width: 100%; max-width: none; aspect-ratio: auto; height: 100%; }
.deck .card-slot:not(:last-of-type) { visibility: hidden; }
body.pos-fail .deck { visibility: hidden; }
/* 28-sep: la carta ocupa todo el alto libre; la foto se lleva lo que sobra tras la frase (nunca se recorta:
   <img> con max-width/max-height, que es «contain» sin franjas negras) y la frase siempre se lee entera */
.card-inner { border-radius: 10px; background: transparent; box-shadow: none; overflow: visible; gap: calc(8px * var(--pos-k, 1));
  padding: calc(24px + 8px * var(--pos-k, 1)) calc(20px + 6px * var(--pos-k, 1)) calc(20px + 8px * var(--pos-k, 1)); } /* dentro del marco dorado (26 px) */
.card-inner::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 0; pointer-events: none;
  border: 26px solid transparent; border-image: url(../assets/passorsmash/ui/panel-gold.webp) 105 fill / 26px / 12px stretch; }
.card-inner > * { position: relative; z-index: 1; }
/* ×2: el brillo va en el MARCO dorado (::before), no en la caja de la carta. La caja es más ancha que el marco y su
   box-shadow pintaba un rectángulo de borde duro alrededor, que se leía como una caja negra detrás (1-oct). */
.card.is-x2 .card-inner { box-shadow: none; }
.card.is-x2 .card-inner::before { filter: drop-shadow(0 0 14px rgba(243,210,122,.7)); }
.card-photo { flex: 1 1 0; min-height: 38%; width: 100%; aspect-ratio: auto; background: none; box-shadow: none; border-radius: 0;
  display: flex; align-items: center; justify-content: center; }
.card-photo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.55), 0 0 0 1.5px rgba(243,210,122,.55), 0 0 18px rgba(243,210,122,.18);
  pointer-events: none; -webkit-user-drag: none; user-select: none; }
.card-stmt { flex: 0 1 auto; padding: 0 2%; font: 800 calc(clamp(15.5px, 4.5vw, 18px) * var(--pos-k, 1))/1.3 var(--pos-fb); color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(243,210,122,.35); text-wrap: balance; }
/* toda la carta es superficie de arrastre: la frase es un contenedor con overflow y, sin esto, el navegador
   se quedaba el gesto como scroll (pointercancel) y deslizar desde el texto no hacía nada */
.card, .card * { touch-action: none; -webkit-user-drag: none; }
/* sin foto: la frase se queda con la carta entera, más grande */
.card-photo.empty + .card-stmt { flex: 1 1 auto; font-size: calc(clamp(19px, 5.6vw, 23px) * var(--pos-k, 1)); }
.card-tema { color: #f3d27a; text-shadow: none; letter-spacing: .12em; font-size: calc(12px * var(--pos-k, 1)); padding: 4px 10px; border-radius: 999px; background: rgba(6,5,8,.72); box-shadow: 0 0 0 1px rgba(243,210,122,.35); } /* chip oscuro: sobre el borde dorado no se leía */
.card-retry { font-family: var(--pos-fd); font-size: calc(12px * var(--pos-k, 1)); letter-spacing: .1em; }
.stamp { font-family: var(--pos-fd); font-size: 20px; border-width: 3px; border-radius: 8px; top: 7%; }
#deck .ghost .g { font-family: var(--pos-fb); }

/* ── PASS / SMASH: las cúpulas de la consola (geometría por JS) ── */
.controls { position: fixed; z-index: 3; display: block; padding: 0; pointer-events: none !important; } /* capa a pantalla completa: sin esto tapaba la carta y no se podía deslizar la foto */
.controls .btn-wrap { pointer-events: auto; }
.swipehint { display: none; }
.btn-wrap { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; cursor: pointer; }
.pos-btn, .pos-btn.pass, .pos-btn.smash { width: 100%; height: 100%; position: absolute; inset: 0; border-radius: 50% 50% 14px 14px; background: transparent; box-shadow: none; font-size: 0; transition: transform .1s; }
.pos-btn::before { content: ""; position: absolute; inset: 6% 6% 22%; border-radius: 50%; opacity: 0; transition: opacity .15s; }
.pos-btn.pass::before { box-shadow: 0 0 0 3px #ff6b5e, 0 0 40px #ff3b3b, inset 0 0 40px rgba(255,59,59,.8); }
.pos-btn.smash::before { box-shadow: 0 0 0 3px #5eff9c, 0 0 40px #22c55e, inset 0 0 40px rgba(34,197,94,.8); }
.pos-btn:active { transform: scale(.94) translateY(3px); }
.pos-btn:active::before { opacity: .7; }
.btn-lbl { position: relative; z-index: 1; font: 900 clamp(14px, 4.4vw, 20px)/1 var(--pos-fd); letter-spacing: .1em; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 16px currentColor; pointer-events: none; }
.btn-lbl.pass { color: #ff6b5e; } .btn-lbl.smash { color: #5eff9c; }
.btn-sub { position: relative; z-index: 1; color: #f0ece4; font-family: var(--pos-fb); font-weight: 800; letter-spacing: .14em; opacity: .9; pointer-events: none; margin-bottom: 4px; font-size: calc(12px * var(--pos-k, 1)); letter-spacing: .1em; }

/* ── variante «compacto» (?botones=compacto): las cúpulas quedan bajo el borde y PASS/SMASH son dos botones arcade ── */
.pos-compacto .btn-wrap { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-content: center; column-gap: calc(10px * var(--pos-k, 1));
  padding: 0 calc(10px * var(--pos-k, 1)); border: 2px solid #d4a843; justify-content: center;
  background: linear-gradient(180deg, rgba(44,38,30,.96), rgba(14,12,16,.97)); box-shadow: inset 0 1px 0 rgba(255,240,192,.35), 0 8px 18px rgba(0,0,0,.6);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.pos-compacto .btn-wrap:first-child { box-shadow: inset 0 1px 0 rgba(255,240,192,.35), inset 0 0 26px rgba(255,59,59,.35); }
.pos-compacto .btn-wrap:last-child { box-shadow: inset 0 1px 0 rgba(255,240,192,.35), inset 0 0 26px rgba(34,197,94,.35); }
.pos-compacto .btn-wrap::before { grid-row: 1 / 3; content: "✖"; display: flex; align-items: center; justify-content: center; pointer-events: none;
  width: calc(40px * var(--pos-k, 1)); height: calc(40px * var(--pos-k, 1)); border-radius: 50%; font: 900 calc(19px * var(--pos-k, 1))/1 var(--pos-fb); color: #fff;
  background: radial-gradient(circle at 38% 32%, #ff8a7a, #d42a1e 55%, #7a0f0a); box-shadow: 0 0 0 2px #f3d27a, 0 0 18px rgba(255,59,59,.8), inset 0 2px 3px rgba(255,255,255,.45); }
.pos-compacto .btn-wrap:last-child::before { content: "✔"; background: radial-gradient(circle at 38% 32%, #8dffbd, #1fae55 55%, #0b5a2a); box-shadow: 0 0 0 2px #f3d27a, 0 0 18px rgba(34,197,94,.8), inset 0 2px 3px rgba(255,255,255,.45); }
.pos-compacto .btn-lbl { align-self: end; justify-self: start; font-size: min(calc(18px * var(--pos-k, 1)), 4.6vw); letter-spacing: .06em; }
.pos-compacto .btn-sub { align-self: start; justify-self: start; margin: 3px 0 0; font-size: calc(12px * var(--pos-k, 1)); }
.pos-compacto .pos-btn, .pos-compacto .pos-btn.pass, .pos-compacto .pos-btn.smash { border-radius: 0; }
.pos-compacto .pos-btn::before { display: none; }
.pos-compacto .btn-wrap:active { transform: scale(.96); }

/* micro-feedback: cifras de oro */
.floatpts, .fbmini { font-family: var(--pos-fd); }
.floatpts { color: #f3d27a; text-shadow: 0 0 20px rgba(243,210,122,.8), 0 2px 0 #5a3d08; }
.fbmini { color: #7cf2ad; text-shadow: 0 0 24px rgba(34,197,94,.8), 0 2px 0 #0f3d22; }

/* ── FALLASTE: la carta gira a rojo en el mismo sitio; Santi y "Entendido" sobre la consola ── */
.fail { background: rgba(6,5,8,.62); padding: 0 !important; display: none; }
body.pos-fail .topbar, body.pos-fail .progress, body.pos-final .topbar, body.pos-final .progress, body.pos-final .deck, body.pos-final .controls { visibility: hidden; }
.fail.show { display: block; }
.fail-title { position: fixed; left: 0; right: 0; top: calc(92px + env(safe-area-inset-top)); z-index: 2; font-family: var(--pos-fd); font-size: clamp(22px, 7vw, 30px); color: #ff5a4a;
  text-shadow: 0 0 30px rgba(255,40,40,.8), 0 4px 0 #5a1610; margin: 0; }
.truth-card { position: fixed; z-index: 3; margin: 0; max-width: none; border-radius: 10px; background: transparent; border: 0; box-shadow: none; padding: calc(34px + 6px * var(--pos-k, 1)) calc(8px + 32px * var(--pos-k, 1)); overflow: visible;
  animation: flipIn .55s .05s cubic-bezier(.34,1.4,.5,1) both; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.truth-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border: 34px solid transparent; border-image: url(../assets/passorsmash/ui/panel-red.webp) 105 fill / 34px / 20px stretch; }
.truth-card > * { position: relative; z-index: 1; }
.fail-santi-row { position: fixed; z-index: 3; left: 14px; right: 14px; max-width: none; margin: 0; }
.fail-santi-bubble { background: #fff; border: 2.5px solid #1a1005; border-radius: 14px; border-bottom-left-radius: 4px; font-family: var(--pos-fb); }
.entendido { position: fixed; z-index: 3; left: 14px; right: 14px; width: auto; margin: 0; min-height: 52px; border: 0; cursor: pointer; font: 900 15px/1 var(--pos-fd); letter-spacing: .06em; text-transform: uppercase; color: #1a1005;
  background: linear-gradient(180deg, #fff0c0, #f3d27a 30%, #d4a843 60%, #a5771c); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.28), 0 8px 14px rgba(0,0,0,.6);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); opacity: .45; transition: opacity .2s; }
.entendido.ready { opacity: 1; }

/* ── FIN DE RONDA: la pantalla es el «Abanico» (css/pos-fin2.css); aquí solo el botón y «Las que fallaste» ── */
.final { background: transparent; padding: calc(62px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
.final > * { position: relative; z-index: 1; }
.final .failed-wrap { order: 9; background: none; border: 0; gap: 4px; }
.final .failed-h { align-self: center; font: 900 11px/1 var(--pos-fd); letter-spacing: .1em; text-transform: uppercase; color: #ff8a7a; padding: 8px 14px; border: 1.5px solid rgba(255,138,122,.6); background: rgba(6,5,8,.7); cursor: pointer; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.final .failed-h::after { content: " · toca para verlas"; font: 700 12px/1 var(--pos-fb); letter-spacing: .06em; color: #cdc6b8; }
.final .failed-wrap.open .failed-h::after { content: " · toca para plegar"; }
.final .failed-wrap:not(.open) .failed-list, .final .failed-wrap:not(.open) .failed-more { display: none; }
.final .failed-wrap.open .failed-list { max-height: 34vh; overflow-y: auto; padding-right: 4px; }
.final .failed-item { background: rgba(6,5,8,.75); }
.final .again { order: 8; margin-top: 4px; }
.failed-wrap { background: rgba(6,5,8,.7); border: 1px solid rgba(212,168,67,.35); border-radius: 12px; }
.final .again { border: 0; min-height: 52px; font: 900 15px/1 var(--pos-fd); letter-spacing: .06em; text-transform: uppercase; color: #1a1005; border-radius: 0;
  background: linear-gradient(180deg, #fff0c0, #f3d27a 30%, #d4a843 60%, #a5771c); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.28), 0 8px 14px rgba(0,0,0,.6);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }

/* ── la corrección dentro de la carta roja: las etiquetas («La afirmación», «Por qué») a 12 px como mínimo.
   correccion.css las pone a .66em y aquí la letra baja a 15,5 → salían a 10 px (QA 1-oct) ── */
#fail .truth-card .corr-etq, #fail .truth-card .corr-h { font-size: max(12px, .72em); }
#fail .truth-card .corr-entrada { font-size: max(15px, .92em); }
/* tablet: el marco rojo se estira con la carta y su filo interior entra hacia dentro; el relleno lateral
   crece con --pos-k (arriba) para que el texto no lo toque. Santi y el botón crecen con la carta. */
.fail-santi { width: calc(64px * var(--pos-k, 1)); }
.fail-santi-bubble { font-size: calc(15px * var(--pos-k, 1)); line-height: 1.3; padding: calc(9px * var(--pos-k, 1)) calc(13px * var(--pos-k, 1)); }
.fail-santi-bubble .who { font-size: calc(12px * var(--pos-k, 1)); }
.entendido { font-size: calc(15px * var(--pos-k, 1)); }

/* ── sin cartas (no cargó el contenido): mensaje + Reintentar en oro; fuera PASS/SMASH, que no harían nada ── */
body.pos-vacio .controls { visibility: hidden; }
.pos-vacio-caja { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; }
.pos-vacio-caja b { font: 900 calc(20px * var(--pos-k, 1))/1.15 var(--pos-fd); color: #f3d27a; text-shadow: 0 0 16px rgba(243,210,122,.45); }
.pos-vacio-caja p { margin: 0; font: 600 calc(16px * var(--pos-k, 1))/1.4 var(--pos-fb); color: #ece3cc; }
.pos-vacio-btn { margin-top: 6px; min-height: 48px; padding: 0 28px; border: 0; border-radius: 14px; cursor: pointer;
  font: 900 calc(16px * var(--pos-k, 1))/1 var(--pos-fd); letter-spacing: .06em; text-transform: uppercase; color: #1a1206;
  background: linear-gradient(180deg, #f7dc93, #d4a843); box-shadow: 0 0 18px rgba(212,168,67,.55), 0 4px 0 #8a6a1c; }
.pos-vacio-btn:active { transform: translateY(2px); box-shadow: 0 0 12px rgba(212,168,67,.45), 0 2px 0 #8a6a1c; }