/* zener.css — Test de percepción (símbolos ESP / Zener) */

/* 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 ===================== */
.zn-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 28%, #2a2360 0%, #161235 55%, #0b0920 100%); color:#e9e6ff; }
.zn-inner { width:100%; max-width:520px; padding:24px 20px 36px; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.zn-title { font-size:22px; font-weight:800; letter-spacing:.5px; margin:0; }
.zn-status { font-size:14px; color:#b9b2ee; margin:0; min-height:20px; transition:color .3s; }
.zn-status.is-ready { color:#9fe0ff; }
.zn-status.is-done  { color:#7cffb2; }
.zn-status.is-error { color:#ff8a9c; }

/* Orbe psíquico */
.zn-orb { position:relative; width:230px; height:230px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(124,109,230,.30), rgba(20,16,52,.18) 70%);
  box-shadow:inset 0 0 50px rgba(124,109,230,.35), 0 0 42px rgba(80,60,180,.25); }
.zn-orb::before, .zn-orb::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(150,130,255,.35); pointer-events:none; }
.zn-orb.idle::before { animation:znPulse 2.8s ease-out infinite; }
.zn-orb.idle::after  { animation:znPulse 2.8s ease-out infinite 1.4s; }
@keyframes znPulse { 0%{transform:scale(.7);opacity:.6;} 100%{transform:scale(1.25);opacity:0;} }

/* Escaneo (ondas mentales rápidas) */
.zn-orb.scanning::before { animation:znScan 1s linear infinite; border-color:rgba(159,224,255,.65); }
.zn-orb.scanning::after  { animation:znScan 1s linear infinite .5s; border-color:rgba(159,224,255,.45); }
@keyframes znScan { 0%{transform:scale(.5);opacity:.95;} 100%{transform:scale(1.4);opacity:0;} }
/* Intensificación final del escaneo (suspenso) */
.zn-orb.deep::before, .zn-orb.deep::after { animation-duration:.55s; border-color:rgba(159,224,255,.9); }
.zn-orb.deep { box-shadow:inset 0 0 60px rgba(159,224,255,.45), 0 0 62px rgba(124,109,230,.5); }

/* Símbolo dentro del orbe */
.zn-symbol { width:140px; height:140px; color:#e7e0ff; opacity:0; transform:scale(.4); filter:blur(8px); }
.zn-symbol svg { width:100%; height:100%; display:block; }
.zn-orb.revealed .zn-symbol { animation:znReveal 1.2s ease forwards; }
@keyframes znReveal {
  0%   { opacity:0; transform:scale(.4) rotate(-8deg); filter:blur(10px); }
  60%  { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:scale(1) rotate(0); filter:drop-shadow(0 0 10px rgba(159,224,255,.9)) drop-shadow(0 0 22px rgba(124,109,230,.7)); }
}

/* Leyenda de los 5 símbolos */
.zn-legend { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.zn-leg { width:54px; display:flex; flex-direction:column; align-items:center; gap:5px; opacity:.4; transition:opacity .35s, transform .35s; }
.zn-leg svg { width:34px; height:34px; color:#cfc8ff; }
.zn-leg span { font-size:10px; color:#a99fe6; }
.zn-leg.on { opacity:1; transform:translateY(-3px); }
.zn-leg.on svg { color:#9fe0ff; filter:drop-shadow(0 0 6px rgba(159,224,255,.85)); }

.zn-new { margin-top:4px; font-size:14px; font-weight:700; padding:11px 28px; border-radius:12px; border:1px solid rgba(150,130,255,.4); background:rgba(124,109,230,.18); color:#e9e6ff; cursor:pointer; }
.zn-new:active { transform:translateY(1px); }

/* ===================== CONTROL ===================== */
.zn-symbol-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; }
.zn-symbol-btn { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:12px; cursor:pointer; padding:9px; border:1.5px solid var(--line); background:#fff; color:#3a3550; transition:border-color .2s, box-shadow .2s, transform .1s; }
.zn-symbol-btn svg { width:100%; height:100%; }
.zn-symbol-btn.sel { border-color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); color:var(--brand1); }
.zn-symbol-btn:active { transform:translateY(1px); }

.zn-ctrl-preview { width:120px; height:120px; border-radius:16px; display:flex; align-items:center; justify-content:center; border:1.5px dashed var(--line); color:var(--brand1); }
.zn-ctrl-preview svg { width:78px; height:78px; }
.zn-ctrl-preview.empty { color:var(--muted); font-size:40px; font-weight:700; }