body{margin:0;background:radial-gradient(circle at top,#2b155f,#050611 58%);color:#e5e7eb;font-family:Segoe UI,Arial,sans-serif}
.app{max-width:600px;margin:auto;padding:14px}
header{text-align:center}
h1{margin:8px 0;font-size:32px}
h2{margin:6px 0 12px}
p{color:#cbd5e1;line-height:1.45}
.card{background:#101827;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:16px;margin:14px 0;box-shadow:0 12px 32px rgba(0,0,0,.25)}
button{width:100%;padding:14px;border:0;border-radius:15px;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;font-weight:800;margin-top:10px;cursor:pointer}
button.secondary{background:#1f2937;border:1px solid rgba(255,255,255,.1)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid a{display:block;text-decoration:none;color:white;background:#182235;border-radius:16px;padding:14px;text-align:center}
.notice{font-size:12px;text-align:center;color:#9ca3af}
pre{white-space:pre-wrap;color:#cbd5e1;background:#050712;padding:12px;border-radius:14px;max-height:220px;overflow:auto}
a{color:#93c5fd}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mode-btn{background:#182235;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;text-align:center;cursor:pointer}
.mode-btn.active{outline:2px solid #22c55e;background:#0d2a1d}
.mode-btn b{display:block}
.mode-btn span{font-size:12px;color:#9ca3af}
.radar{position:relative;width:315px;height:315px;margin:8px auto;border-radius:50%;background:radial-gradient(circle,#06351f,#03120c 70%);border:2px solid rgba(34,197,94,.55);overflow:hidden}
.radar:before,.radar:after{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:rgba(34,197,94,.3)}
.radar:after{transform:rotate(90deg)}
.ring{position:absolute;border:1px solid rgba(34,197,94,.25);border-radius:50%;inset:15%}
.r2{inset:30%}.r3{inset:45%}
.sweep{position:absolute;left:50%;top:50%;width:50%;height:2px;background:linear-gradient(90deg,#22c55e,transparent);transform-origin:left;animation:s 3s linear infinite;filter:drop-shadow(0 0 8px #22c55e)}
@keyframes s{to{transform:rotate(360deg)}}
.center{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#22c55e;transform:translate(-50%,-50%);box-shadow:0 0 14px #22c55e}
.dot{position:absolute;width:16px;height:16px;border-radius:50%;background:#ef4444;box-shadow:0 0 22px #ef4444;display:none;transition:all .45s ease}
.dot.pulse{animation:pulse .65s ease}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.75)}100%{transform:scale(1)}}
.radar-data{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:8px 0}
.radar-data div{background:#0b1020;border-radius:14px;padding:10px;text-align:center}
.radar-data b{display:block;font-size:20px}
.radar-data span{font-size:12px;color:#9ca3af}
.lights{display:flex;justify-content:center;gap:9px;margin:20px}
.lights span{width:24px;height:24px;border-radius:50%;background:#334155}
.lights span:nth-child(1){background:#22c55e}.lights span:nth-child(2){background:#eab308}.lights span:nth-child(3){background:#f97316}.lights span:nth-child(4){background:#ef4444}
.meter{height:18px;background:#050712;border-radius:99px;overflow:hidden}
.meter div{height:100%;width:12%;background:linear-gradient(90deg,#22c55e,#ef4444);transition:.4s}

.back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  color:#fff;
  background:#182235;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:11px 14px;
  font-weight:800;
  margin:4px 0 12px;
}
.back-button:active{transform:scale(.98)}
.emf-device{
  max-width:250px;
  margin:12px auto;
  background:linear-gradient(90deg,#111,#2a2a2a 48%,#050505);
  border-radius:28px 28px 42px 42px;
  padding:18px 18px 42px;
  box-shadow:inset 0 0 18px rgba(255,255,255,.08),0 18px 36px rgba(0,0,0,.45);
  border:2px solid #050505;
}
.emf-leds{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.emf-led{
  width:22px;height:22px;border-radius:50%;
  background:#334155;box-shadow:inset 0 0 6px #000;
}
.emf-led.on{box-shadow:0 0 16px currentColor, inset 0 0 7px #fff}
.emf-led.green{color:#22c55e;background:#14532d}
.emf-led.yellow{color:#fde047;background:#854d0e}
.emf-led.orange{color:#fb923c;background:#7c2d12}
.emf-led.red{color:#ef4444;background:#7f1d1d}
.emf-screen{
  background:#d6d0a8;
  border:4px solid #111;
  border-radius:8px;
  color:#111;
  padding:10px;
  text-align:center;
  font-weight:900;
}
.emf-needle-wrap{
  height:85px;
  position:relative;
  margin-top:8px;
  background:linear-gradient(90deg,#22c55e,#84cc16,#fde047,#fb923c,#ef4444);
  clip-path:polygon(0 100%, 50% 0, 100% 100%);
  opacity:.9;
}
.emf-needle{
  position:absolute;
  left:50%;
  bottom:0;
  width:3px;
  height:80px;
  background:#111;
  transform-origin:bottom center;
  transform:rotate(-55deg);
  transition:transform .25s ease;
}
.emf-body-lines{
  margin:24px auto 0;
  width:84px;
  height:86px;
  border:3px solid #161616;
  border-top:0;
  border-radius:0 0 14px 14px;
  opacity:.7;
}
.emf-reading{
  text-align:center;
  font-size:34px;
  font-weight:900;
  color:#22c55e;
  margin-top:12px;
}
.emf-level{text-align:center;color:#cbd5e1;font-weight:700}


.emf-direction{
  margin:12px auto 0;
  background:#050712;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:10px;
  text-align:center;
}
.emf-compass{
  position:relative;
  width:96px;
  height:96px;
  margin:8px auto;
  border-radius:50%;
  border:1px solid rgba(34,197,94,.5);
  background:radial-gradient(circle,#06291a,#020807);
}
.emf-compass:before,.emf-compass:after{
  content:'';
  position:absolute;
  left:50%;
  top:8px;
  width:2px;
  height:80px;
  background:rgba(34,197,94,.22);
  transform:translateX(-50%);
}
.emf-compass:after{transform:translateX(-50%) rotate(90deg)}
.emf-arrow{
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:42px;
  background:#ef4444;
  transform-origin:bottom center;
  transform:translate(-50%,-100%) rotate(0deg);
  box-shadow:0 0 12px #ef4444;
}
.emf-direction small{color:#9ca3af}
.emf-help{
  font-size:13px;
  color:#cbd5e1;
  margin-top:8px;
}


.evp-device{
  max-width:260px;
  margin:12px auto;
  background:linear-gradient(90deg,#151515,#2b2b2b,#090909);
  border-radius:34px;
  padding:18px;
  border:2px solid #050505;
  box-shadow:inset 0 0 18px rgba(255,255,255,.08),0 18px 36px rgba(0,0,0,.45);
}
.evp-mics{display:flex;justify-content:space-between;margin-bottom:8px}
.evp-mic{
  width:62px;height:44px;border-radius:50%;
  background:radial-gradient(circle,#aaa,#333 60%,#111);
  border:3px solid #555;
}
.evp-screen{
  background:#9fb7a7;
  color:#07140c;
  border:4px solid #111;
  border-radius:8px;
  padding:10px;
  font-family:monospace;
  min-height:92px;
}
.evp-rec{
  color:#ef4444;
  font-weight:900;
  animation:recblink 1s infinite;
}
@keyframes recblink{50%{opacity:.25}}
.evp-wave{
  height:42px;
  margin-top:8px;
  background:linear-gradient(90deg,transparent,#072,#0a5,#072,transparent);
  clip-path:polygon(0 50%,5% 40%,10% 60%,15% 30%,20% 70%,25% 45%,30% 55%,35% 25%,40% 75%,45% 48%,50% 52%,55% 36%,60% 64%,65% 20%,70% 80%,75% 42%,80% 58%,85% 35%,90% 65%,95% 48%,100% 50%);
}
.evp-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.evp-controls button{margin:0;padding:10px}
.evp-timer{text-align:center;font-size:28px;font-weight:900;color:#0f172a}


/* EVP PRO skin */
.evp-pro{
  max-width:330px;
  margin:12px auto;
  background:linear-gradient(135deg,#0b0b0b,#2a2a2a 45%,#060606);
  border:2px solid #3a3a3a;
  border-radius:30px;
  padding:16px;
  box-shadow:inset 0 0 18px rgba(255,255,255,.08),0 18px 38px rgba(0,0,0,.55);
}
.evp-pro-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.evp-brand{font-weight:900;letter-spacing:2px;color:#d1d5db}
.evp-rec-dot{color:#ef4444;font-weight:900;text-shadow:0 0 10px #ef4444}
.evp-pro-screen{
  background:#07130b;
  border:3px solid #111;
  border-radius:12px;
  padding:12px;
  color:#52ff75;
  font-family:Consolas,monospace;
  box-shadow:inset 0 0 20px rgba(34,197,94,.16);
}
.evp-wave-live{
  height:72px;
  margin:10px 0;
  background:
    linear-gradient(rgba(34,197,94,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,197,94,.12) 1px,transparent 1px);
  background-size:18px 18px;
  position:relative;
  overflow:hidden;
}
.evp-wave-live:after{
  content:'';
  position:absolute;left:0;right:0;top:50%;
  height:48px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,#22c55e,#86efac,#22c55e,transparent);
  clip-path:polygon(0 50%,4% 46%,8% 54%,12% 38%,16% 62%,20% 48%,24% 52%,28% 30%,32% 70%,36% 42%,40% 58%,44% 18%,48% 82%,52% 48%,56% 52%,60% 35%,64% 65%,68% 24%,72% 76%,76% 44%,80% 56%,84% 36%,88% 64%,92% 47%,96% 53%,100% 50%);
  opacity:.9;
  animation:waveMove 1.2s linear infinite;
}
@keyframes waveMove{from{transform:translate(-35%,-50%)}to{transform:translate(35%,-50%)}}
.evp-levels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.evp-vu{height:90px;background:#050505;border:1px solid #333;border-radius:8px;padding:7px;display:flex;align-items:end;gap:4px;justify-content:center}
.evp-vu span{display:block;width:9px;background:#22c55e;border-radius:2px;box-shadow:0 0 7px #22c55e}
.evp-vu span:nth-child(n+7){background:#eab308;box-shadow:0 0 7px #eab308}
.evp-vu span:nth-child(n+10){background:#ef4444;box-shadow:0 0 7px #ef4444}
.evp-analysis{background:#050712;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;color:#cbd5e1;font-size:13px}
.evp-pro-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.evp-pro-controls button{margin:0;padding:11px}

/* Spirit Box skin */
.spiritbox-device{
  max-width:330px;
  margin:12px auto;
  background:linear-gradient(135deg,#050505,#1e1e1e 48%,#090909);
  border:2px solid #2d2d2d;
  border-radius:26px;
  padding:18px;
  box-shadow:inset 0 0 16px rgba(255,255,255,.08),0 18px 38px rgba(0,0,0,.55);
}
.spirit-display{
  background:#ff4b1f;
  color:#300;
  border:4px solid #111;
  border-radius:12px;
  padding:14px;
  text-align:center;
  font-family:Consolas,monospace;
  box-shadow:0 0 20px rgba(255,75,31,.22), inset 0 0 12px rgba(0,0,0,.35);
}
.spirit-freq{font-size:42px;font-weight:900;letter-spacing:2px}
.spirit-band{font-size:13px;font-weight:900}
.spirit-speaker{
  width:210px;height:160px;margin:18px auto 8px;border-radius:18px;
  background:repeating-linear-gradient(90deg,#050505,#050505 5px,#202020 6px,#202020 11px);
  border:3px solid #111;
  box-shadow:inset 0 0 22px #000;
}
.spirit-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.spirit-buttons button{margin:0;padding:10px;font-size:13px}
.spirit-word{
  text-align:center;
  color:#22c55e;
  font-size:30px;
  font-weight:900;
  text-shadow:0 0 14px #22c55e;
  min-height:40px;
  margin-top:12px;
}
.spirit-log{
  background:#050712;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:10px;color:#cbd5e1;font-size:13px;min-height:70px;
}


/* Ouija module */
.ouija-board{
  max-width:360px;
  margin:12px auto;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,220,130,.35),transparent 15%),
    radial-gradient(circle at 80% 15%,rgba(255,220,130,.25),transparent 15%),
    linear-gradient(135deg,#5b3217,#2b160b 55%,#160b05);
  border:4px solid #9a6a36;
  border-radius:22px;
  padding:18px 12px 26px;
  color:#f7d08a;
  box-shadow:inset 0 0 22px rgba(0,0,0,.65),0 18px 42px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}
.ouija-title{text-align:center;font-size:30px;font-weight:900;letter-spacing:4px;margin-bottom:4px}
.ouija-sub{text-align:center;font-size:12px;color:#ffe6b0;margin-bottom:14px}
.ouija-row{display:flex;justify-content:center;gap:7px;margin:9px 0;flex-wrap:wrap}
.ouija-letter,.ouija-word{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#ffe6b0;
  text-shadow:0 0 6px #000;
}
.ouija-word{width:auto;padding:0 14px;border-radius:999px;border:1px solid rgba(255,230,176,.3)}
.ouija-letter.active{background:#f7d08a;color:#2b160b;box-shadow:0 0 18px #f7d08a}
.planchette{
  width:78px;height:62px;
  background:linear-gradient(135deg,#b9793b,#6b3517);
  border:2px solid #f7d08a;
  border-radius:50% 50% 46% 46%;
  position:absolute;
  left:50%;top:72%;
  transform:translate(-50%,-50%);
  transition:left .55s ease,top .55s ease;
  box-shadow:0 12px 25px rgba(0,0,0,.55),inset 0 0 12px rgba(255,255,255,.15);
}
.planchette:after{
  content:'';
  position:absolute;left:50%;top:50%;
  width:22px;height:22px;border-radius:50%;
  border:2px solid #ffe6b0;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.18);
}
.ouija-message{
  background:#050712;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:10px;color:#f7d08a;min-height:46px;text-align:center;font-size:22px;font-weight:900;
}
.ouija-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ouija-controls button{margin:0}

/* Voice indicators */
.voice-pill{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  background:#1f2937;
  color:#cbd5e1;
  font-size:12px;
  margin-top:8px;
}


/* Ouija Beta con imágenes reales */
.ouija-beta-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:14px auto 12px;
}
.ouija-image-board{
  position:relative;
  width:min(100%, 760px);
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  background:#140b07;
}
.ouija-board-img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.ouija-planchette-img{
  position:absolute;
  left:50%;
  top:62%;
  width:17%;
  max-width:145px;
  min-width:68px;
  height:auto;
  transform:translate(-50%,-50%);
  z-index:2;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.55));
  transition:left .62s cubic-bezier(.22,.8,.25,1), top .62s cubic-bezier(.22,.8,.25,1), transform .18s ease;
}
.ouija-message{margin-top:12px;}

.ouija-image-board.is-channeling .ouija-planchette-img{
  transform:translate(-50%,-50%) scale(1.03);
}
@media (max-width:560px){
  .ouija-planchette-img{
    width:20%;
    min-width:58px;
  }
}