/* pasado.css — Ya Te Conocía (reencarnación)
   La foto del espectador se compara contra una galería de retratos
   REALES del siglo XIX (dominio público, Wikimedia). El sistema
   "encuentra" su gemelo histórico: parecido real (embeddings) o
   elegido por ti desde control. Tema archivo/sepia. */

.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.ps-screen { min-height:100svh; min-height:100vh; background:radial-gradient(120% 80% at 50% 0%, #241a11 0%, #191009 55%, #0d0805 100%); color:#e8d9be; }
.ps-screen .exit-btn { background:rgba(40,30,18,.9); color:#cdb488; border-color:#5a4527; }
.ps-inner { width:100%; max-width:560px; margin:0 auto; min-height:100svh; min-height:100vh; padding:20px 14px 40px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.ps-title { font-size:17px; font-weight:800; letter-spacing:5px; margin:0; color:#d8b46a; text-transform:uppercase; text-shadow:0 0 16px rgba(216,180,106,.4); font-family:Georgia, "Times New Roman", serif; }
.ps-sub { margin:0; font-size:12px; color:#a88f63; font-family:Georgia, serif; font-style:italic; }
.ps-conn { margin:0; min-height:18px; font-size:12.5px; color:#8a744c; font-style:italic; }
.ps-conn.is-error { color:#d66; }

/* Subir foto */
.ps-upload { width:100%; display:flex; align-items:center; justify-content:center; margin:6px 0; }
.ps-drop { width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 20px; border:2px dashed #5a4527; border-radius:16px; color:#d8b46a; cursor:pointer; background:rgba(30,20,10,.4); }
.ps-drop:active { transform:translateY(1px); }
.ps-drop .big { font-size:15px; font-weight:700; color:#e8d9be; }
.ps-drop .dim { font-size:11.5px; color:#a88f63; line-height:1.5; }

/* Foto del espectador (miniatura) */
.ps-you { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ps-you img { width:96px; height:120px; object-fit:cover; border-radius:8px; border:3px solid #7a5e30; box-shadow:0 6px 18px rgba(0,0,0,.5); filter:sepia(.25); }
.ps-you .cap { font-size:11px; color:#a88f63; letter-spacing:1px; }

.ps-startbtn { font-size:14px; font-weight:800; letter-spacing:2px; padding:12px 34px; border-radius:12px; border:1.5px solid #d8b46a; background:rgba(216,180,106,.12); color:#e9d29a; cursor:pointer; font-family:Georgia, serif; }
.ps-startbtn:disabled { opacity:.4; }
.ps-startbtn:active { transform:translateY(1px); }

.ps-scan { margin:0; min-height:18px; font-size:12px; color:#cdb488; font-variant-numeric:tabular-nums; }

/* Galería de retratos */
.ps-grid { width:100%; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:4px; }
@media (max-width:420px){ .ps-grid { grid-template-columns:repeat(3, 1fr); } }
.ps-frame { position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; border:3px solid #6a5230; background:#20160c; box-shadow:0 4px 12px rgba(0,0,0,.5); transition:transform .5s, opacity .5s, border-color .5s, filter .5s; }
.ps-frame img, .ps-frame svg { width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.55) contrast(1.02) brightness(.95); }
.ps-frame .scan-line { position:absolute; left:0; right:0; height:26px; background:linear-gradient(180deg, rgba(216,180,106,0), rgba(216,180,106,.35)); top:-26px; }
.ps-frame.scanning .scan-line { animation:psScan 1s linear infinite; }
@keyframes psScan { 0%{ top:-26px; } 100%{ top:100%; } }
.ps-frame.dim { opacity:.18; filter:grayscale(.4); }
.ps-frame.match { border-color:#f2cf7a; transform:scale(1.04); box-shadow:0 0 26px rgba(242,207,122,.6); z-index:2; }
.ps-frame.match img, .ps-frame.match svg { filter:sepia(.35) contrast(1.05); }

/* Resultado */
.ps-result { width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding-bottom:20px; }
.ps-result-tag { margin:12px 0 0; font-size:11px; font-weight:800; letter-spacing:3px; color:#d8b46a; }
.ps-plate { width:100%; max-width:360px; margin-top:6px; padding:14px 16px; border-radius:10px; background:linear-gradient(180deg,#2a1e10,#20160c); border:1px solid #5a4527; }
.ps-name { margin:0; font-size:26px; font-weight:800; color:#f2cf7a; font-family:Georgia, serif; letter-spacing:1px; }
.ps-era { margin:3px 0 0; font-size:13px; color:#cdb488; font-style:italic; }
.ps-story { margin:8px 0 0; font-size:14px; color:#e8d9be; line-height:1.5; min-height:20px; }
.ps-sim { margin:10px 0 0; font-size:15px; color:#d8b46a; font-weight:700; font-variant-numeric:tabular-nums; }
.ps-cursor { animation:psBlink 1s steps(1) infinite; color:#d8b46a; }
@keyframes psBlink { 50% { opacity:0; } }

/* ===================== CONTROL ===================== */
.psc-grid { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.psc-pick { padding:9px 4px; border-radius:9px; border:1px solid var(--line); background:#f6efe1; color:#7a5e30; font-weight:700; font-size:13px; cursor:pointer; text-align:center; line-height:1.2; }
.psc-pick small { display:block; font-size:9px; color:#a88f63; font-weight:600; }
.psc-pick.active { background:#d8b46a; color:#231708; border-color:#b8923f; }
.psc-auto { width:100%; padding:11px; border-radius:11px; border:1px dashed #b8923f; background:#faf5ea; color:#7a5e30; font-weight:700; cursor:pointer; }
.psc-auto.active { background:#efe0c2; }
.psc-send { width:100%; padding:14px; border-radius:13px; border:none; cursor:pointer; color:#231708; font-weight:800; font-size:15px; letter-spacing:1px; background:linear-gradient(135deg,#e6c574,#c99f45); }
.psc-send:active { transform:translateY(1px); }
.psc-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.psc-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.psc-reset:active { transform:translateY(1px); }