/* vivos.css — El Test de Vivos y Muertos (5 fotos, 5 velas) */

/* Barra de salida (igual que el resto de efectos) */
.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 ===================== */
.vm-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 15%, #241a12 0%, #170f0a 50%, #0a0605 85%); color:#d8c9ae; overflow:hidden; }
.vm-screen .exit-btn { background:rgba(40,28,18,.85); color:#b09a78; border-color:#4a3826; }
.vm-inner { width:100%; max-width:560px; padding:22px 14px 40px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.vm-title { font-family:Georgia, "Times New Roman", serif; font-size:18px; font-weight:700; letter-spacing:4px; margin:0; color:#c9a84c; text-transform:uppercase; text-shadow:0 0 16px rgba(201,168,76,.3); }
.vm-status { font-size:13.5px; color:#8f7f64; margin:0; min-height:20px; font-style:italic; transition:color .4s; }
.vm-status.is-ready { color:#c9a84c; }
.vm-status.is-error { color:#d66; }

/* Rejilla: 3 arriba, 2 abajo */
.vm-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 14px; width:100%; }

.vm-item { display:flex; flex-direction:column; align-items:center; gap:7px; width:30%; min-width:96px; max-width:130px; }

/* ---------- Vela pequeña ---------- */
.vm-candle { position:relative; width:30px; height:52px; display:flex; flex-direction:column; align-items:center; }
.vm-flame { position:relative; width:14px; height:26px; margin-bottom:-2px; transform-origin:50% 100%; transition:transform 2.2s ease, opacity 2s ease; }
.vm-flame::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 50% 62% at 50% 72%, #fff6d8 0%, #ffd88a 30%, #ffa63c 60%, rgba(190,70,15,0) 100%); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; animation:vmFlick .24s ease-in-out infinite alternate; }
.vm-flame::after { content:""; position:absolute; inset:-8px -10px -4px; background:radial-gradient(ellipse at 50% 70%, rgba(255,180,80,.45) 0%, transparent 70%); border-radius:50%; filter:blur(3px); }
@keyframes vmFlick {
  0%   { transform:scaleY(1)    skewX(0deg); }
  50%  { transform:scaleY(1.08) skewX(2.5deg); }
  100% { transform:scaleY(.94)  skewX(-2deg); }
}
/* Vela apagada: la llama muere despacio y sube un hilo de humo */
.vm-item.out .vm-flame { transform:scaleY(.04) scaleX(.4); opacity:0; }

/* Vela agonizando (duelo final): la llama se encoge y chisporrotea */
.vm-item.dying .vm-flame { transform:scaleY(.45) scaleX(.75); transition:transform .5s ease; }
.vm-item.dying .vm-flame::before { animation:vmDying .13s ease-in-out infinite alternate; }
@keyframes vmDying {
  0%   { opacity:1;  transform:scaleY(.9)  skewX(3deg); }
  40%  { opacity:.35; transform:scaleY(.55) skewX(-4deg); }
  100% { opacity:.8; transform:scaleY(1.05) skewX(2deg); }
}
.vm-smoke { position:absolute; left:50%; top:-16px; width:5px; height:30px; margin-left:-2.5px; opacity:0; pointer-events:none; }
.vm-smoke::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(170,170,175,.5) 40%, transparent 100%); border-radius:50%; filter:blur(2px); }
.vm-item.smoking .vm-smoke { animation:vmSmoke 2.6s ease-out 1; }
@keyframes vmSmoke {
  0%   { opacity:0;  transform:translateY(12px) skewX(0deg); }
  20%  { opacity:.85; }
  100% { opacity:0;  transform:translateY(-26px) skewX(-10deg) scaleY(1.5); }
}
.vm-wick { width:2.5px; height:6px; background:#2a2017; border-radius:1px; position:relative; z-index:2; }
.vm-body { width:16px; height:26px; border-radius:4px 4px 3px 3px; background:linear-gradient(90deg, #b8a583, #f2e7c8 45%, #cbb890); box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 -4px 6px rgba(90,70,40,.4); transition:filter 1.6s ease; }
.vm-item.out .vm-body { filter:brightness(.45); }

/* ---------- Foto ---------- */
.vm-photo { position:relative; width:100%; aspect-ratio:4/5; perspective:700px; }
.vm-in { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.4,.1,.2,1); }
.vm-item.open .vm-in { transform:rotateY(180deg); }
.vm-front, .vm-face { position:absolute; inset:0; border-radius:8px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.55); }
/* Dorso: foto antigua boca abajo */
.vm-front { background:linear-gradient(150deg, #8a7454 0%, #6d5a3e 55%, #55462f 100%); display:flex; align-items:center; justify-content:center; }
.vm-front::before { content:""; position:absolute; inset:7px; border:1.5px solid rgba(240,225,190,.35); border-radius:5px; }
.vm-front span { font-family:Georgia,serif; font-size:26px; color:rgba(240,225,190,.55); }
/* Cara: el retrato (SVG de respaldo o foto real de Public/fotos/) */
.vm-face { transform:rotateY(180deg); background:#e8e0cc; padding:5px; }
.vm-face svg, .vm-face img { width:100%; height:100%; display:block; border-radius:4px; object-fit:cover; transition:filter 1.2s ease; }
/* El difunto: blanco y negro, apagado */
.vm-item.dead .vm-face svg, .vm-item.dead .vm-face img { filter:grayscale(1) contrast(1.08) brightness(.88); }
.vm-item.dead .vm-face { background:#d9d4c8; }

.vm-name { font-family:Georgia, serif; font-size:12.5px; font-weight:700; letter-spacing:2px; color:#c4b190; text-transform:uppercase; }
.vm-item.out .vm-name { color:#6d604b; }

/* Botones */
.vm-new { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 38px; border-radius:14px; border:1px solid #6e5a38; background:linear-gradient(135deg,#4a3c24,#2b2214); color:#e8d9b0; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.vm-new:active { transform:translateY(1px); }
.vm-new:disabled { opacity:.4; cursor:default; }

/* ===================== CONTROL ===================== */
.vmc-names { display:grid; grid-template-columns:repeat(1,1fr); gap:8px; width:100%; }
.vmc-name { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.vmc-name .av { width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none; background:#eee; }
.vmc-name .av svg, .vmc-name .av img { width:100%; height:100%; display:block; object-fit:cover; }
.vmc-name .nm { font-size:15px; font-weight:800; color:#3a3550; letter-spacing:1px; }
.vmc-name.sel { border-color:#1f2330; box-shadow:0 0 0 3px rgba(31,35,48,.18); }
.vmc-name.sel .av svg { filter:grayscale(1); }
.vmc-name.sel .nm { color:#1f2330; text-decoration:line-through; }
.vmc-name:active { transform:translateY(1px); }