/* test.css — Test Psicológico de una Carta */

/* 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-bar.exit-bottom { top:auto; bottom:14px; right:50%; transform:translateX(50%); }
.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 ===================== */
.ts-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 20%, #241d55 0%, #16113a 52%, #090717 100%); color:#ece9ff; }
.ts-inner { width:100%; max-width:500px; padding:24px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.ts-title { font-size:22px; font-weight:800; letter-spacing:.5px; margin:0; }
.ts-sub { font-size:13px; color:#a99fe6; margin:0; }

/* Progreso */
.ts-progress { display:flex; gap:8px; }
.ts-dot { width:9px; height:9px; border-radius:50%; background:rgba(150,130,255,.28); transition:background .3s, transform .3s; }
.ts-dot.done { background:#9a86ff; }
.ts-dot.current { background:#c9b8ff; transform:scale(1.35); }

/* Pregunta + opciones */
.ts-quiz { width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; }
.ts-q { font-size:19px; font-weight:700; line-height:1.35; max-width:420px; min-height:52px; }
.ts-options { display:flex; flex-direction:column; gap:10px; width:100%; max-width:400px; }
.q-option { font-size:15px; font-weight:600; padding:15px 18px; border-radius:14px; cursor:pointer; text-align:left;
  border:1.5px solid rgba(150,130,255,.3); background:rgba(255,255,255,.05); color:#ece9ff; transition:border-color .15s, background .15s, transform .08s; }
.q-option:hover { border-color:rgba(180,160,255,.7); background:rgba(124,109,230,.16); }
.q-option:active { transform:translateY(1px); }
.q-option.chosen { border-color:#c9b8ff; background:rgba(150,120,255,.22); }

/* Análisis (aura estilo La Venda) */
.ts-analyze { display:flex; flex-direction:column; align-items:center; gap:16px; }
.ts-orb { position:relative; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(124,109,230,.30), rgba(20,16,52,.16) 70%);
  box-shadow:inset 0 0 42px rgba(124,109,230,.36), 0 0 36px rgba(120,90,220,.28); }
.ts-orb::before, .ts-orb::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(175,155,255,.5); }
.ts-orb::before { animation:tsScan 1.3s ease-out infinite; }
.ts-orb::after  { animation:tsScan 1.3s ease-out infinite .65s; }
@keyframes tsScan { 0%{ transform:scale(.55); opacity:.95; } 100%{ transform:scale(1.4); opacity:0; } }
.ts-analyze-text { font-size:15px; font-style:italic; color:#c9b8ff; min-height:22px; }

/* Revelación de la carta */
.ts-reveal { display:flex; flex-direction:column; align-items:center; gap:14px; }
.ts-card { width:210px; max-width:66vw; aspect-ratio:5/7; perspective:900px; }
.ts-card-inner { width:100%; height:100%; }
.ts-card svg { width:100%; height:100%; display:block; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.ts-card.show .ts-card-inner { animation:tsFlip .9s cubic-bezier(.2,.8,.2,1); }
@keyframes tsFlip { 0%{ transform:rotateY(90deg) scale(.85); opacity:0; } 60%{ opacity:1; } 100%{ transform:rotateY(0) scale(1); opacity:1; } }
.ts-reveal-text { font-size:15px; color:#9fffd6; font-weight:700; }

/* Botones */
.ts-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ts-btn { font-size:14px; font-weight:700; padding:12px 26px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(150,130,255,.4); background:rgba(124,109,230,.18); color:#ece9ff; transition:transform .1s, box-shadow .2s, opacity .2s; }
.ts-btn:hover { box-shadow:0 8px 22px rgba(108,92,231,.35); }
.ts-btn:active { transform:translateY(1px); }
.ts-btn.ghost { background:transparent; }

/* ===================== CONTROL ===================== */
/* (reutiliza cards.css para el selector de palo/valor y la vista previa) */
.ts-force-note { width:100%; font-size:12px; color:var(--muted); background:#f3f0ff; border:1px solid #e6e0fb; border-radius:12px; padding:9px 12px; text-align:center; line-height:1.5; }
.ts-force-note b { color:var(--brand1); }
.ts-force-note .k { font-weight:700; color:var(--ink); }