/* Ultra 4.1 KV Root – estilos principales (resumen, sin comentarios largos) */
*{box-sizing:border-box;margin:0;padding:0}
:root{
 --gold:#f6c453;
 --blue:#38bdf8;
 --text:#f9fafb;
 --muted:#9ca3af;
 --intensity:0.7;
}
body{
 margin:0;
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 background:radial-gradient(circle at top,#020617 0,#02010a 45%,#000 100%);
 color:var(--text);
 overflow-y:auto;
 overflow-x:hidden;
 min-height:100vh;
}
.bg-layer{
 position:fixed;inset:-40%;
 background:
  radial-gradient(circle at 10% 20%,rgba(56,189,248,.26),transparent 60%),
  radial-gradient(circle at 80% 0,rgba(59,130,246,.35),transparent 60%),
  radial-gradient(circle at 50% 90%,rgba(88,28,135,.32),transparent 70%);
 filter:blur(2px);opacity:.8;mix-blend-mode:screen;
 animation:nebula 26s linear infinite alternate;
 pointer-events:none;z-index:0;
}
@keyframes nebula{
 0%{transform:translate3d(-15px,-10px,0) scale(1)}
 50%{transform:translate3d(20px,10px,0) scale(1.05)}
 100%{transform:translate3d(-25px,20px,0) scale(1.08)}
}
.page{
 position:relative;z-index:1;
 max-width:1120px;margin:16px auto;padding:16px 12px 14px;
 border-radius:22px;
 background:
  radial-gradient(circle at top,rgba(56,189,248,.16),transparent 55%),
  radial-gradient(circle at bottom,rgba(246,196,83,.12),transparent 65%),
  rgba(3,7,18,.96);
 border:1px solid rgba(148,163,253,.35);
 box-shadow:
  0 0 45px rgba(15,23,42,1),
  0 0 calc(120px*var(--intensity)) rgba(56,189,248,.45),
  0 0 calc(140px*var(--intensity)) rgba(246,196,83,.3);
 backdrop-filter:blur(14px);
}
.header{text-align:center;margin-bottom:10px}
.header h1{
 font-size:1.1rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;
}
.subtitle{font-size:.85rem;color:var(--muted)}
.main{margin-top:12px;display:flex;flex-direction:column;gap:16px}
@media(min-width:900px){
 .main{flex-direction:row;align-items:flex-start}
 .portal-view{flex:3}.side-panel{flex:2}
}
.portal-view{display:flex;flex-direction:column;align-items:center;gap:12px}
.portal-frame{
 position:relative;width:min(430px,100%);aspect-ratio:1/1;padding:10px;
 border-radius:28px;
 background:
  radial-gradient(circle at center,rgba(56,189,248,.18),transparent 60%),
  linear-gradient(135deg,#020617,#020617,#000);
 border:1px solid rgba(56,189,248,.65);
 box-shadow:0 0 30px rgba(15,23,42,.9),0 0 55px rgba(56,189,248,.6);
 overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.portal-glow{
 position:absolute;inset:-10%;border-radius:999px;
 background:radial-gradient(circle,rgba(56,189,248,.5),transparent 70%);
 mix-blend-mode:screen;filter:blur(3px);opacity:.55;
 animation:portalGlow 18s linear infinite;
}
@keyframes portalGlow{
 0%{transform:rotate(0) scale(1)}
 50%{transform:rotate(120deg) scale(1.06)}
 100%{transform:rotate(240deg) scale(1.1)}
}
.portal-warp{
 position:absolute;inset:12%;border-radius:999px;
 border:1px dashed rgba(148,163,253,.7);
 box-shadow:0 0 26px rgba(56,189,248,.6),inset 0 0 20px rgba(15,23,42,1);
 opacity:.65;animation:warpSpin 14s linear infinite;
}
@keyframes warpSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
#portal-image{
 width:100%;height:100%;border-radius:20px;object-fit:cover;position:relative;z-index:1;
 animation:breath 10s ease-in-out infinite;
}
@keyframes breath{
 0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}
}
.transition-burst{animation:burst .7s ease-out}
.transition-warp{animation:warp .75s ease-in-out}
.transition-ripple{animation:ripple .8s ease-out}
@keyframes burst{
 0%{transform:scale(.96);filter:brightness(1)}
 40%{transform:scale(1.09);filter:brightness(1.9)}
 100%{transform:scale(1);filter:brightness(1)}
}
@keyframes warp{
 0%{transform:scale(1) skew(0,0);filter:blur(0)}
 40%{transform:scale(.9) skew(6deg,-6deg);filter:blur(2px)}
 100%{transform:scale(1) skew(0,0);filter:blur(0)}
}
@keyframes ripple{
 0%{transform:scale(1);box-shadow:none}
 30%{transform:scale(1.06);box-shadow:0 0 38px rgba(56,189,248,.95)}
 100%{transform:scale(1);box-shadow:none}
}
.portal-label{
 text-align:center;font-size:.92rem;letter-spacing:.22em;text-transform:uppercase;
 color:var(--muted);margin-top:6px;
}
#mantra-box{
 margin-top:14px;min-height:3.4em;text-align:center;font-size:1.1rem;line-height:1.7;
 color:var(--gold);
 text-shadow:0 0 13px rgba(246,196,83,.9),0 0 24px rgba(56,189,248,.7);
 padding:0 10px 4px;opacity:0;transform:translateY(10px);
 transition:opacity .6s ease,transform .6s ease;
}
#mantra-box.visible{opacity:1;transform:translateY(0)}
#mantra-box .word{opacity:0;display:inline-block;animation:wordIn .32s forwards}
@keyframes wordIn{to{opacity:1}}
.side-panel{display:flex;flex-direction:column;gap:12px}
.portal-menu h2,.controls h2{
 font-size:.86rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:6px;
}
.portal-buttons{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.portal-button{
 border-radius:999px;border:1px solid rgba(56,189,248,.75);
 background:radial-gradient(circle at top left,rgba(56,189,248,.32),rgba(15,23,42,.98));
 padding:8px 10px;color:var(--text);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
 cursor:pointer;position:relative;overflow:hidden;
 transition:background .16s ease-out,transform .12s ease-out,box-shadow .16s ease-out,border-color .16s ease-out;
}
.portal-button.small{font-size:.72rem}
.portal-button::before{
 content:"";position:absolute;inset:0;
 background:radial-gradient(circle at center,rgba(255,255,255,.26),transparent 60%);
 opacity:0;transition:opacity .16s ease-out;pointer-events:none;
}
.portal-button:hover::before{opacity:.5}
.portal-button:hover{
 transform:translateY(-1px);
 box-shadow:0 0 18px rgba(56,189,248,.6);
 border-color:rgba(246,196,83,.9);
}
.portal-button:active{transform:translateY(1px) scale(.98)}
.portal-button.active{
 background:radial-gradient(circle at top,rgba(246,196,83,.8),rgba(15,23,42,1));
 box-shadow:0 0 26px rgba(246,196,83,1),0 0 45px rgba(56,189,248,.7);
 border-color:rgba(246,196,83,1);
}
.controls{
 border-radius:18px;padding:10px 10px 12px;
 border:1px solid rgba(56,189,248,.6);
 background:radial-gradient(circle at top,rgba(37,99,235,.3),rgba(15,23,42,1));
 box-shadow:0 0 26px rgba(37,99,235,.65);
 display:flex;flex-direction:column;gap:8px;font-size:.8rem;
}
#energy-range{width:100%;margin-top:4px}
.toggles{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.toggles label{display:flex;align-items:center;gap:6px;color:var(--muted)}
.power-buttons{display:flex;gap:8px;margin-top:8px}
.footer{text-align:center;margin-top:8px;font-size:.75rem;color:var(--muted)}
.backdrop{
 position:absolute;inset:0;
 background:radial-gradient(circle at center,rgba(15,23,42,.7),rgba(0,0,0,.98));
 display:flex;align-items:center;justify-content:center;
 opacity:0;pointer-events:none;transition:opacity 1s ease;z-index:2;
}
.backdrop.active{opacity:1;pointer-events:auto}
.ritual-box{
 padding:18px 16px;border-radius:18px;
 background:radial-gradient(circle at top,rgba(246,196,83,.9),rgba(15,23,42,1));
 border:1px solid rgba(15,23,42,.8);
 box-shadow:0 0 30px rgba(246,196,83,.95),0 0 70px rgba(56,189,248,.7);
 max-width:85%;
}
.ritual-text{
 font-size:.9rem;text-align:center;color:#020617;font-weight:600;
 text-shadow:0 0 9px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.8);
}
/* Lock */
.lock{
 position:fixed;inset:0;
 background:radial-gradient(circle at top,rgba(15,23,42,.92),rgba(0,0,0,.98));
 display:flex;justify-content:center;align-items:center;z-index:20;
}
.lock-box{
 background:radial-gradient(circle at top,rgba(56,189,248,.45),rgba(15,23,42,1));
 padding:22px 20px 18px;border-radius:18px;
 border:1px solid rgba(246,196,83,.9);
 box-shadow:0 0 30px rgba(56,189,248,.9),0 0 75px rgba(0,0,0,.9);
 text-align:center;max-width:320px;width:90%;
}
.lock-box h2{
 margin-bottom:4px;letter-spacing:.18em;text-transform:uppercase;
 font-size:.95rem;color:var(--gold);
}
.lock-box p{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.lock-box input{
 width:100%;padding:9px 10px;margin-bottom:10px;border-radius:999px;
 border:1px solid rgba(15,23,42,.9);outline:none;
 background:rgba(15,23,42,.95);color:var(--text);text-align:center;
}
.lock-box button{
 width:100%;padding:9px 10px;border-radius:999px;border:none;
 background:linear-gradient(90deg,var(--gold),var(--blue));color:#020617;
 cursor:pointer;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
 box-shadow:0 0 20px rgba(246,196,83,.8),0 0 32px rgba(56,189,248,.7);
}
.lock-box #msg{margin-top:8px;font-size:.75rem;color:#fecaca}
.hidden{display:none!important}
/* Intro */
.intro{
 position:fixed;inset:0;background:#000;
 display:flex;align-items:center;justify-content:center;flex-direction:column;
 z-index:25;overflow:hidden;
}
.intro-bg{
 position:absolute;inset:-20%;
 background:radial-gradient(circle at center,#020617 0,#000 60%,#020617 100%);
 opacity:.9;
}
.intro-eclipse{
 position:absolute;width:260px;height:260px;border-radius:999px;
 box-shadow:0 0 45px #000,0 0 90px #000,0 0 120px #0f172a;
 background:radial-gradient(circle,#020617 40%,#000 80%);
}
.intro-kv{position:relative;z-index:2;text-align:center}
.intro-kv-top{
 display:block;font-size:3.1rem;font-weight:700;
 letter-spacing:.35em;text-indent:.35em;
 background:linear-gradient(120deg,var(--gold),var(--blue));
 -webkit-background-clip:text;background-clip:text;color:transparent;
 text-shadow:0 0 25px rgba(246,196,83,.9),0 0 50px rgba(56,189,248,.8);
 animation:kvFloat 3s ease-in-out infinite;
}
.intro-kv-bottom{
 display:block;margin-top:5px;font-size:.8rem;
 letter-spacing:.34em;text-transform:uppercase;color:rgba(148,163,253,.9);
}
.intro-flare{
 position:absolute;width:380px;height:380px;border-radius:999px;
 background:radial-gradient(circle,rgba(246,196,83,.4),transparent 60%);
 mix-blend-mode:screen;filter:blur(4px);opacity:.6;
 animation:flarePulse 3.2s ease-in-out infinite;
}
@keyframes kvFloat{
 0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}
}
@keyframes flarePulse{
 0%{transform:scale(.9);opacity:.3}
 50%{transform:scale(1.05);opacity:.9}
 100%{transform:scale(.9);opacity:.3}
}