*{box-sizing:border-box;margin:0;padding:0}
body{background:#020810;color:#c0daf0;font-family:'Segoe UI',sans-serif;max-width:680px;margin:0 auto}

/* INTRO — compatible con Chrome Android antiguo */
#intro{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:#000;
  z-index:9999;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#intro.hide{
  opacity:0;
  pointer-events:none;
  -webkit-transition:opacity 1.2s ease;
  transition:opacity 1.2s ease;
}

/* Fondo radial */
#ifog{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:-webkit-radial-gradient(center 40%,ellipse,#001828 0%,#000 70%);
  background:radial-gradient(ellipse at center 40%,#001828 0%,#000 70%);
}

/* Anillos */
#irings{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
.iring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(0,229,255,.08);
  -webkit-animation:iRP 4s ease infinite;
  animation:iRP 4s ease infinite;
}
.iring:nth-child(1){width:220px;height:220px;}
.iring:nth-child(2){width:360px;height:360px;-webkit-animation-delay:.7s;animation-delay:.7s;}
.iring:nth-child(3){width:500px;height:500px;-webkit-animation-delay:1.4s;animation-delay:1.4s;}
@-webkit-keyframes iRP{0%,100%{opacity:.06;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:.2;-webkit-transform:scale(1.04);transform:scale(1.04)}}
@keyframes iRP{0%,100%{opacity:.06;transform:scale(1)}50%{opacity:.2;transform:scale(1.04)}}

/* Contenido */
#icont{
  position:relative;
  z-index:4;
  text-align:center;
  padding:0 20px;
}

/* PSI */
#ipsi{
  font-size:88px;
  font-weight:900;
  color:#00e5ff;
  font-family:Georgia,serif;
  line-height:1;
  text-shadow:0 0 50px rgba(0,229,255,.8),0 0 100px rgba(0,229,255,.3);
  opacity:0;
  -webkit-animation:none;
  animation:none;
}
@media(max-width:400px){#ipsi{font-size:64px;}}
@-webkit-keyframes iPsiIn{
  0%  {opacity:0;-webkit-transform:scale(0.03) translateY(-115px);transform:scale(0.03) translateY(-115px);filter:blur(68px) brightness(11)}
  10% {opacity:.18;-webkit-transform:scale(0.07) translateY(-95px);transform:scale(0.07) translateY(-95px);filter:blur(58px) brightness(9)}
  20% {opacity:.36;-webkit-transform:scale(0.15) translateY(-75px);transform:scale(0.15) translateY(-75px);filter:blur(48px) brightness(7)}
  30% {opacity:.55;-webkit-transform:scale(0.28) translateY(-55px);transform:scale(0.28) translateY(-55px);filter:blur(36px) brightness(5)}
  40% {opacity:.75;-webkit-transform:scale(0.46) translateY(-32px);transform:scale(0.46) translateY(-32px);filter:blur(22px) brightness(3.5)}
  48% {opacity:.92;-webkit-transform:scale(0.72) translateY(-12px);transform:scale(0.72) translateY(-12px);filter:blur(10px) brightness(2.2)}
  53% {opacity:1;-webkit-transform:scale(2.5);transform:scale(2.5);filter:blur(0) brightness(8)}
  57% {opacity:1;-webkit-transform:scale(6.5);transform:scale(6.5);filter:blur(5px) brightness(16)}
  61% {opacity:.08;-webkit-transform:scale(10);transform:scale(10);filter:blur(35px) brightness(28)}
  66% {opacity:.3;-webkit-transform:scale(7.5);transform:scale(7.5);filter:blur(30px) brightness(18)}
  72% {opacity:.55;-webkit-transform:scale(4.2);transform:scale(4.2);filter:blur(20px) brightness(8)}
  79% {opacity:.78;-webkit-transform:scale(2.2);transform:scale(2.2);filter:blur(10px) brightness(4)}
  85% {opacity:.85;-webkit-transform:scale(1.5);transform:scale(1.5);filter:blur(4px) brightness(2.5)}
  90% {opacity:.95;-webkit-transform:scale(1.18);transform:scale(1.18);filter:blur(1.5px) brightness(1.6)}
  94% {opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05);filter:blur(0.4px) brightness(1.2)}
  97% {opacity:1;-webkit-transform:scale(1.015);transform:scale(1.015);filter:blur(0) brightness(1.05)}
  100%{opacity:1;-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);filter:blur(0) brightness(1)}
}
@keyframes iPsiIn{
  0%  {opacity:0;transform:scale(0.03) translateY(-115px);filter:blur(68px) brightness(11)}
  10% {opacity:.18;transform:scale(0.07) translateY(-95px);filter:blur(58px) brightness(9)}
  20% {opacity:.36;transform:scale(0.15) translateY(-75px);filter:blur(48px) brightness(7)}
  30% {opacity:.55;transform:scale(0.28) translateY(-55px);filter:blur(36px) brightness(5)}
  40% {opacity:.75;transform:scale(0.46) translateY(-32px);filter:blur(22px) brightness(3.5)}
  48% {opacity:.92;transform:scale(0.72) translateY(-12px);filter:blur(10px) brightness(2.2)}
  53% {opacity:1;transform:scale(2.5);filter:blur(0) brightness(8)}
  57% {opacity:1;transform:scale(6.5);filter:blur(5px) brightness(16)}
  61% {opacity:.08;transform:scale(10);filter:blur(35px) brightness(28)}
  66% {opacity:.3;transform:scale(7.5);filter:blur(30px) brightness(18)}
  72% {opacity:.55;transform:scale(4.2);filter:blur(20px) brightness(8)}
  79% {opacity:.78;transform:scale(2.2);filter:blur(10px) brightness(4)}
  85% {opacity:.85;transform:scale(1.5);filter:blur(4px) brightness(2.5)}
  90% {opacity:.95;transform:scale(1.18);filter:blur(1.5px) brightness(1.6)}
  94% {opacity:1;transform:scale(1.05);filter:blur(0.4px) brightness(1.2)}
  97% {opacity:1;transform:scale(1.015);filter:blur(0) brightness(1.05)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(1)}
}

/* PSIONIC */
#ipsionic{
  font-size:36px;
  font-weight:900;
  color:#fff;
  font-family:monospace;
  letter-spacing:12px;
  margin-top:8px;
  text-shadow:0 0 30px rgba(0,229,255,.4);
  opacity:0;
  -webkit-animation:iFadeUp .4s ease .55s forwards;
  animation:iFadeUp .4s ease .55s forwards;
}
@media(max-width:400px){#ipsionic{font-size:26px;letter-spacing:8px;}}
@-webkit-keyframes iFadeUp{from{opacity:0;-webkit-transform:translateY(12px);transform:translateY(12px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes iFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

#iline{width:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,229,255,.6),transparent);margin:14px auto;-webkit-transition:width .9s ease .85s;transition:width .9s ease .85s;}
#iline.show{width:200px;}
#itag{font-size:10px;color:rgba(0,229,255,.75);letter-spacing:6px;font-family:monospace;text-transform:uppercase;opacity:0;-webkit-animation:none;animation:none;}
#iprod{font-size:11px;color:rgba(255,255,255,.25);letter-spacing:3px;font-family:monospace;margin-top:5px;opacity:0;-webkit-animation:none;animation:none;}
#ibar{width:0;height:2px;background:linear-gradient(90deg,rgba(0,229,255,.3),#00e5ff,#2979ff,#00e5ff,rgba(0,229,255,.3));margin:20px auto 0;border-radius:2px;box-shadow:0 0 8px rgba(0,229,255,.5);-webkit-transition:width 2.6s ease .9s;transition:width 2.6s ease .9s;}
#ibar.show{width:140px;}

/* Developer credits */
#idev{position:absolute;bottom:52px;left:0;right:0;text-align:center;opacity:0;-webkit-animation:none;animation:none;}
#idev-name{font-size:13px;color:rgba(255,255,255,.65);font-family:monospace;letter-spacing:3px;font-weight:600;}
#idev-ceo{font-size:10px;color:rgba(0,229,255,.7);letter-spacing:2px;margin-top:4px;font-family:monospace;}
#idev-role{font-size:9px;color:#253848;letter-spacing:2px;margin-top:3px;font-family:monospace;}

/* BOTON INICIO — visible y grande */
#istart{
  margin-top:28px;
  padding:16px 40px;
  background:rgba(0,229,255,.15);
  border:2px solid #00e5ff;
  border-radius:50px;
  color:#00e5ff;
  font-family:monospace;
  font-size:15px;
  font-weight:700;
  letter-spacing:4px;
  cursor:pointer;
  -webkit-animation:iFadeUp .5s ease 2s forwards,iBtnPulse 1.6s ease 2.5s infinite;
  animation:iFadeUp .5s ease 2s forwards,iBtnPulse 1.6s ease 2.5s infinite;
  opacity:0;
  -webkit-tap-highlight-color:transparent;
}
@-webkit-keyframes iBtnPulse{0%,100%{box-shadow:0 0 8px rgba(0,229,255,.3)}50%{box-shadow:0 0 24px rgba(0,229,255,.7)}}
@keyframes iBtnPulse{0%,100%{box-shadow:0 0 8px rgba(0,229,255,.3)}50%{box-shadow:0 0 24px rgba(0,229,255,.7)}}

#ihint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:monospace;font-size:11px;color:rgba(0,229,255,.45);letter-spacing:3px;-webkit-animation:iHint 1.8s ease infinite;animation:iHint 1.8s ease infinite;}
@-webkit-keyframes iHint{0%,100%{opacity:.2}50%{opacity:.7}}
@keyframes iHint{0%,100%{opacity:.2}50%{opacity:.7}}

/* LOG DEBUG */


/* ALARM */
#alarm{display:none;position:sticky;top:0;z-index:100;background:#ff1a3a;padding:10px 16px;text-align:center;font-size:13px;font-weight:700;font-family:monospace;-webkit-animation:alP .8s ease infinite;animation:alP .8s ease infinite;}
@-webkit-keyframes alP{0%,100%{background:#ff1a3a}50%{background:#aa0010}}
@keyframes alP{0%,100%{background:#ff1a3a}50%{background:#aa0010}}

/* APP BODY */
.hdr{background:linear-gradient(160deg,#020810,#081820);border-bottom:1px solid rgba(0,229,255,.1);padding:18px 20px;}
.psel{display:-webkit-flex;display:flex;gap:10px;padding:14px 16px;background:#040e18;}
.pbtn{-webkit-flex:1;flex:1;padding:14px 10px;border-radius:14px;border:2px solid rgba(255,255,255,.07);background:#061220;cursor:pointer;text-align:left;}
.otabs{display:-webkit-flex;display:flex;gap:6px;padding:10px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.otab{padding:7px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:monospace;color:#3a6480;}
.otab.sel{border-color:#ff2040;background:rgba(255,32,64,.15);color:#ff2040;}
#ow{width:100%;height:300px;background:radial-gradient(ellipse at 40% 35%,#150005,#030810);overflow:hidden;cursor:grab;}
.sec{margin:0 16px 14px;padding:18px;border-radius:16px;background:#061220;border:1px solid rgba(0,229,255,.1);}
.sl{font-size:9px;letter-spacing:3px;color:#3a6480;font-family:monospace;margin-bottom:12px;}
.vbar{padding:12px 16px;display:-webkit-flex;display:flex;gap:8px;flex-wrap:wrap;}
.btn{-webkit-flex:1;flex:1;min-width:80px;padding:11px 10px;border-radius:12px;border:2px solid;font-size:12px;font-weight:700;cursor:pointer;font-family:monospace;}
.vmsg{margin:0 16px 8px;padding:8px 14px;border-radius:8px;font-size:12px;line-height:1.5;display:none;background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.4);color:#ffb300;}
.ktxt{margin:0 16px 8px;padding:14px;border-radius:14px;background:#061220;border:1px solid rgba(0,229,255,.1);display:none;max-height:200px;overflow-y:auto;font-size:14px;line-height:2;}
.kp{padding:0 3px;border-radius:4px;}
.kp.on{color:#00e5ff;background:rgba(0,229,255,.12);}
.rrow{display:-webkit-flex;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:0 16px;}
.rc{-webkit-flex:1 1 130px;flex:1 1 130px;padding:16px;border-radius:14px;text-align:center;}
.al{padding:12px 14px;border-radius:10px;margin-bottom:8px;font-size:13px;line-height:1.6;border-left:4px solid;}
.lr{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.lr:last-child{border-bottom:none;}
.lt{position:relative;height:9px;background:rgba(255,255,255,.06);border-radius:5px;}
.sb{margin-bottom:9px;cursor:pointer;padding:6px 10px;border-radius:10px;}
.sbf{height:9px;border-radius:5px;width:0;-webkit-transition:width 1.3s ease;transition:width 1.3s ease;}
.ftr{margin:0 16px 28px;padding:20px;border-radius:16px;background:linear-gradient(135deg,rgba(0,229,255,.04),rgba(0,229,255,.07));border:1px solid rgba(0,229,255,.18);text-align:center;}

/* Animaciones se activan cuando .go se añade (al tap) */
#intro.go #ipsi{-webkit-animation:iPsiIn 7s cubic-bezier(0.16,0.84,0.3,1) .05s forwards !important;animation:iPsiIn 7s cubic-bezier(0.16,0.84,0.3,1) .05s forwards !important;}
#intro.go #ipsionic{animation:iFadeUp .4s ease .5s forwards,iShimmer 1.8s ease .68s forwards !important;}
#intro.go #iline{transition:width .9s ease .82s !important;}
#intro.go #itag{animation:iFadeUp .4s ease 1.05s forwards !important;}
#intro.go #iprod{animation:iFadeUp .4s ease 1.32s forwards !important;}
#intro.go #ibar{transition:width 2.5s ease .86s !important;}
#intro.go #idev{animation:iFadeUp .5s ease 1.7s forwards !important;}

/* FX LENS FLARE STARFIELD */
#irays2{position:absolute;top:0;left:0;right:0;bottom:0;background:conic-gradient(from 270deg at 48% 42%,transparent 0deg,rgba(0,229,255,.018) 15deg,transparent 30deg,rgba(255,255,255,.012) 50deg,transparent 65deg,rgba(0,229,255,.015) 85deg,transparent 100deg,rgba(41,121,255,.012) 130deg,transparent 145deg,rgba(0,229,255,.018) 175deg,transparent 190deg,rgba(255,255,255,.010) 220deg,transparent 235deg,rgba(0,229,255,.015) 260deg,transparent 275deg);-webkit-animation:iRay2 28s linear infinite reverse;animation:iRay2 28s linear infinite reverse;pointer-events:none;}
@keyframes iRay2{to{transform:rotate(360deg)}}
#iflare{position:absolute;top:38%;left:-30%;width:160%;height:3px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,.9) 42%,rgba(0,255,255,1) 50%,rgba(255,255,255,.9) 58%,rgba(255,255,255,0) 85%,transparent 100%);filter:blur(1px);-webkit-animation:lensFlare 5.5s ease-in-out infinite;animation:lensFlare 5.5s ease-in-out infinite;pointer-events:none;}
#iflare::after{content:'';position:absolute;top:-8px;left:42%;width:16%;height:19px;background:radial-gradient(ellipse,rgba(255,255,255,.7) 0%,rgba(0,229,255,.5) 25%,transparent 70%);filter:blur(2px);}
@keyframes lensFlare{0%{opacity:0;transform:translateX(-60%) scaleX(0.3)}20%{opacity:0;transform:translateX(-40%) scaleX(0.5)}35%{opacity:1;transform:translateX(0%) scaleX(1)}50%{opacity:.85;transform:translateX(20%) scaleX(1.1)}65%{opacity:1;transform:translateX(40%) scaleX(1)}80%{opacity:0;transform:translateX(60%) scaleX(0.5)}100%{opacity:0;transform:translateX(80%) scaleX(0.2)}}
#ipsi{will-change:transform,filter,opacity;background:linear-gradient(170deg,#ffffff 0%,#d6f5ff 12%,#00e5ff 30%,#0088c0 50%,#003850 65%,#00aac8 80%,#e0f8ff 95%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 0 30px rgba(0,229,255,1),0 0 60px rgba(0,229,255,.7),0 0 100px rgba(0,229,255,.4),-3px 0 rgba(255,60,60,.35),3px 0 rgba(60,60,255,.35);-webkit-animation:iPsiPulse 2.8s ease infinite;animation:iPsiPulse 2.8s ease infinite;}
@-webkit-keyframes iPsiPulse{0%,100%{text-shadow:0 0 30px rgba(0,229,255,1),0 0 60px rgba(0,229,255,.7),0 0 100px rgba(0,229,255,.4),-3px 0 rgba(255,60,60,.35),3px 0 rgba(60,60,255,.35)}50%{text-shadow:0 0 50px rgba(0,229,255,1),0 0 100px rgba(0,229,255,.9),0 0 180px rgba(0,229,255,.6),-5px 0 rgba(255,60,60,.5),5px 0 rgba(60,60,255,.5),0 0 220px rgba(255,255,255,.15)}}
@keyframes iPsiPulse{0%,100%{text-shadow:0 0 30px rgba(0,229,255,1),0 0 60px rgba(0,229,255,.7),0 0 100px rgba(0,229,255,.4),-3px 0 rgba(255,60,60,.35),3px 0 rgba(60,60,255,.35)}50%{text-shadow:0 0 50px rgba(0,229,255,1),0 0 100px rgba(0,229,255,.9),0 0 180px rgba(0,229,255,.6),-5px 0 rgba(255,60,60,.5),5px 0 rgba(60,60,255,.5),0 0 220px rgba(255,255,255,.15)}}
@-webkit-keyframes iShimmer{from{background-position:250% 0}to{background-position:-150% 0}}
@keyframes iShimmer{from{background-position:250% 0}to{background-position:-150% 0}}
@-webkit-keyframes iFogPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes iFogPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
#ifog{-webkit-animation:iFogPulse 6s ease infinite;animation:iFogPulse 6s ease infinite;}
#istars{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}
#ufoStage{position:absolute;top:50%;left:0;right:0;width:100%;height:140px;transform:translateY(-50%);pointer-events:none;z-index:6;opacity:0;animation:ufoStageFadeIn 0.8s ease 1.4s forwards;}
@keyframes ufoStageFadeIn{0%{opacity:0}100%{opacity:0.92}}
#ufoSvg{width:100%;height:100%;display:block;overflow:visible;}
#ufoDisc{will-change:transform,opacity;transform:translate3d(-220px,90px,0);}
#ufoTrail{stroke:url(#ecgStroke);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;filter:drop-shadow(0 0 6px rgba(0,255,180,0.95));}
#ufoDisc circle, #ufoDisc ellipse{filter:drop-shadow(0 0 4px rgba(0,229,255,0.6));}
#intro.go #ufoStage{display:none;}
#iflash{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,1) 0%,rgba(180,240,255,.98) 18%,rgba(0,229,255,.7) 50%,rgba(0,80,160,.2) 82%,transparent 100%);}
#intro.go #iflash{-webkit-animation:atomicFlash 7s ease forwards;animation:atomicFlash 7s ease forwards;}
@-webkit-keyframes atomicFlash{0%{opacity:0}44%{opacity:0}50%{opacity:1}58%{opacity:.85}68%{opacity:.55}78%{opacity:.22}88%{opacity:.06}100%{opacity:0}}
@keyframes atomicFlash{0%{opacity:0}44%{opacity:0}50%{opacity:1}58%{opacity:.85}68%{opacity:.55}78%{opacity:.22}88%{opacity:.06}100%{opacity:0}}