/* =============================================================
   POWERS v3 — PERSONIFIED ANIME POWERS + CLICK INTENSITY
   ============================================================= */

/* ===== ANIMATION TOGGLE ===== */
#anim-toggle{position:fixed;bottom:20px;left:20px;z-index:9999;width:44px;height:44px;border-radius:50%;background:rgba(15,15,25,.92);border:1px solid rgba(124,106,239,.25);color:#e8ecf4;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);transition:all .3s;box-shadow:0 4px 20px rgba(0,0,0,.4)}
#anim-toggle:hover{border-color:rgba(124,106,239,.6);transform:scale(1.1)}
#anim-toggle.paused{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4)}
body.anims-off *,body.anims-off *::before,body.anims-off *::after{animation-play-state:paused!important}
body.anims-off #three-canvas{display:none!important}

/* ===== COMBO INDICATOR ===== */
#combo-meter{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99998;pointer-events:none;font-size:3rem;font-weight:900;opacity:0;transition:opacity .15s;text-shadow:0 0 30px currentColor;font-family:'Segoe UI',sans-serif}
#combo-meter.show{opacity:1;animation:comboScale .3s ease-out}
@keyframes comboScale{from{transform:translate(-50%,-50%) scale(2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* ===== POWERS PANEL ===== */
#powers-panel{position:fixed;bottom:20px;right:20px;z-index:9998;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#powers-toggle{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,rgba(15,15,25,.95),rgba(25,15,30,.95));border:1px solid rgba(240,180,41,.3);color:#f0b429;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);transition:all .3s;box-shadow:0 4px 24px rgba(0,0,0,.5);position:relative}
#powers-toggle:hover{border-color:rgba(240,180,41,.7);transform:scale(1.15)}
#powers-toggle .badge{position:absolute;top:-5px;right:-5px;background:#10b981;color:#fff;font-size:.55rem;font-weight:800;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(10,10,18,1)}

#powers-drawer{display:none;width:340px;max-height:75vh;overflow-y:auto;background:rgba(8,8,14,.97);border:1px solid rgba(124,106,239,.12);border-radius:16px;backdrop-filter:blur(24px);box-shadow:0 24px 80px rgba(0,0,0,.7);padding:18px}
#powers-drawer.open{display:block;animation:drawerIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes drawerIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
#powers-drawer::-webkit-scrollbar{width:4px}
#powers-drawer::-webkit-scrollbar-thumb{background:rgba(124,106,239,.2);border-radius:2px}
#powers-drawer h3{font-size:.9rem;font-weight:800;margin-bottom:4px;background:linear-gradient(90deg,#f0b429,#ef4444,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pw-subtitle{font-size:.52rem;color:rgba(150,150,170,.4);margin-bottom:14px}

.version-toggle{display:flex;gap:4px;margin-bottom:10px;background:rgba(20,20,30,.8);border-radius:8px;padding:3px}
.version-toggle button{flex:1;padding:6px;border:none;border-radius:6px;font-size:.62rem;font-weight:700;cursor:pointer;background:transparent;color:rgba(200,200,220,.4);transition:all .2s}
.version-toggle .v-safe.active{background:rgba(16,185,129,.15);color:#10b981}
.version-toggle .v-god.active{background:rgba(239,68,68,.15);color:#ef4444;text-shadow:0 0 8px rgba(239,68,68,.3)}

.mode-switch{display:flex;gap:4px;margin-bottom:14px;background:rgba(20,20,30,.8);border-radius:8px;padding:3px}
.mode-switch button{flex:1;padding:6px 10px;border:none;border-radius:6px;font-size:.65rem;font-weight:700;cursor:pointer;background:transparent;color:rgba(200,200,220,.4);transition:all .2s}
.mode-switch button.active{background:rgba(124,106,239,.15);color:#a594fd}

.controls-hint{font-size:.48rem;color:rgba(150,150,170,.3);margin-bottom:12px;padding:6px 8px;border:1px solid rgba(50,50,70,.2);border-radius:6px;background:rgba(20,20,30,.5);line-height:1.5}
.controls-hint kbd{background:rgba(124,106,239,.1);padding:1px 4px;border-radius:3px;color:rgba(160,160,180,.5);border:1px solid rgba(80,80,100,.2)}

/* Power Cards */
.power-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;margin-bottom:6px;border:1px solid rgba(50,50,70,.25);background:rgba(15,15,25,.7);transition:all .3s;cursor:pointer;position:relative;overflow:hidden}
.power-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s}
.power-card:not(.locked):hover{transform:translateX(-4px);border-color:rgba(124,106,239,.3)}
.power-card:not(.locked):hover::before{opacity:1}
.power-card.locked{opacity:.3;cursor:not-allowed;filter:grayscale(.8)}
.power-card.active-power{border-color:rgba(240,180,41,.35)}
.power-card.active-power::before{opacity:.5}

.power-card.aot-card::before{background:linear-gradient(90deg,rgba(232,93,58,.06),transparent)}
.power-card.cyber-card::before{background:linear-gradient(90deg,rgba(14,165,233,.06),transparent)}
.power-card.lain-card::before{background:linear-gradient(90deg,rgba(124,106,239,.06),transparent)}
.power-card.mirror-card::before{background:linear-gradient(90deg,rgba(150,150,170,.04),transparent)}

.pw-icon{font-size:1.5rem;width:36px;text-align:center}
.pw-info{flex:1;min-width:0}
.pw-name{font-size:.72rem;font-weight:800;color:#e8ecf4}
.pw-persona{font-size:.52rem;font-weight:600;color:rgba(200,200,220,.35);font-style:italic}
.pw-desc{font-size:.5rem;color:rgba(150,150,170,.4);margin-top:2px}
.pw-anime{font-size:.46rem;font-weight:800;padding:2px 6px;border-radius:4px;display:inline-block;margin-top:3px;letter-spacing:.5px}
.pw-level{font-size:.46rem;color:rgba(240,180,41,.5);margin-left:6px}
.pw-anime.aot{background:rgba(232,93,58,.15);color:#e85d3a}
.pw-anime.lain{background:rgba(124,106,239,.15);color:#7c6aef}
.pw-anime.cyber{background:rgba(14,165,233,.15);color:#0ea5e9}
.pw-anime.mirror{background:rgba(150,150,170,.15);color:#9696aa}

.pw-status{font-size:.5rem;font-weight:800;padding:3px 8px;border-radius:5px;white-space:nowrap}
.pw-status.use{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.2)}
.pw-status.equipped{background:rgba(240,180,41,.15);color:#f0b429;border:1px solid rgba(240,180,41,.2)}
.pw-status.locked-st{background:rgba(60,60,80,.2);color:rgba(100,100,120,.4)}

/* ===== CURSOR EFFECTS — CRANKED v3 ===== */
.power-cursor{position:fixed;pointer-events:none;z-index:99997}

/* Eren — titan lightning ring with steam */
.cursor-eren{width:55px;height:55px;border-radius:50%;border:3px solid rgba(232,93,58,.6);box-shadow:0 0 30px rgba(232,93,58,.3),0 0 60px rgba(255,200,50,.1),inset 0 0 20px rgba(232,93,58,.15);animation:erenPulse 1s ease-in-out infinite}
.cursor-eren::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,200,50,.15);animation:erenLightning .3s steps(2) infinite}
@keyframes erenPulse{0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(232,93,58,.3)}50%{transform:scale(1.5);box-shadow:0 0 50px rgba(232,93,58,.4),0 0 80px rgba(255,200,50,.15)}}
@keyframes erenLightning{50%{border-color:rgba(255,220,50,.3);transform:rotate(30deg)}}

/* V — neon hex scanner with data readout */
.cursor-v{width:45px;height:45px;border:2px solid rgba(14,165,233,.7);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:rgba(14,165,233,.08);box-shadow:0 0 25px rgba(14,165,233,.35);animation:vScan 1.5s linear infinite}
.cursor-v::after{content:'';position:absolute;inset:4px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);border:1px solid rgba(14,165,233,.3);animation:vScan 3s linear infinite reverse}
@keyframes vScan{to{transform:rotate(360deg)}}

/* Founding Titan — massive trembling ring */
.cursor-founder{width:65px;height:65px;border-radius:50%;border:3px solid rgba(255,30,20,.7);box-shadow:0 0 40px rgba(255,30,20,.25),inset 0 0 25px rgba(255,30,20,.12);animation:founderBeat .7s ease-in-out infinite}
.cursor-founder::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(255,30,20,.2);animation:founderRing 1.5s ease-out infinite}
@keyframes founderBeat{0%,100%{transform:scale(1)}25%{transform:scale(1.6);box-shadow:0 0 60px rgba(255,30,20,.4)}50%{transform:scale(.85)}}
@keyframes founderRing{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.5);opacity:0}}

/* Bandersnatch — dual choice split */
.cursor-bandersnatch{width:45px;height:45px;border:1px solid rgba(150,150,170,.5);background:linear-gradient(135deg,rgba(200,200,220,.08) 49%,transparent 49%,transparent 51%,rgba(120,120,140,.08) 51%);box-shadow:0 0 20px rgba(150,150,170,.12);animation:choicePulse 2s ease-in-out infinite}
.cursor-bandersnatch::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(150,150,170,.3)}
@keyframes choicePulse{0%,100%{border-color:rgba(150,150,170,.5)}50%{border-color:rgba(200,200,220,.8);box-shadow:0 0 30px rgba(150,150,170,.2)}}

/* Lucy — pink netrun diamond with trails */
.cursor-lucy{width:35px;height:35px;border:2px solid rgba(236,72,153,.6);transform:rotate(45deg);background:rgba(236,72,153,.06);box-shadow:0 0 25px rgba(236,72,153,.25),0 0 50px rgba(168,85,247,.12);animation:lucyPulse 1.2s ease-in-out infinite}
.cursor-lucy::after{content:'';position:absolute;inset:5px;border:1px solid rgba(168,85,247,.3);transform:rotate(15deg);animation:lucyInner 2s linear infinite}
@keyframes lucyPulse{0%,100%{box-shadow:0 0 25px rgba(236,72,153,.25)}50%{box-shadow:0 0 40px rgba(236,72,153,.4),0 0 70px rgba(168,85,247,.2)}}
@keyframes lucyInner{to{transform:rotate(375deg)}}

/* Cookie — time loop clock */
.cursor-cookie{width:45px;height:45px;border-radius:50%;border:1px dashed rgba(150,150,170,.5);animation:cookieLoop 1.5s linear infinite}
.cursor-cookie::after{content:'';position:absolute;top:50%;left:50%;width:1px;height:18px;background:rgba(150,150,170,.4);transform-origin:bottom;animation:cookieHand 2s linear infinite}
@keyframes cookieLoop{to{transform:rotate(360deg)}}
@keyframes cookieHand{to{transform:rotate(360deg)}}

/* Lain — glitch cube cluster with wired tendrils */
.cursor-lain{width:18px;height:18px;background:rgba(124,106,239,.7);box-shadow:5px 5px 0 rgba(168,85,247,.5),-4px -4px 0 rgba(100,80,200,.4),8px -3px 0 rgba(140,110,255,.3),0 0 25px rgba(124,106,239,.3);animation:lainGlitch .12s steps(3) infinite}
@keyframes lainGlitch{0%{transform:translate(0,0)}33%{transform:translate(3px,-2px) rotate(3deg)}66%{transform:translate(-2px,3px) rotate(-2deg)}}

/* Alice — golden memory halo expanding */
.cursor-alice{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,60,.15),rgba(255,180,40,.05) 50%,transparent 75%);box-shadow:0 0 35px rgba(255,180,40,.18);animation:aliceGlow 2s ease-in-out infinite}
.cursor-alice::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,180,40,.12);animation:aliceRing 3s ease-in-out infinite}
@keyframes aliceGlow{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.4);opacity:1}}
@keyframes aliceRing{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.6);opacity:.1}}

/* ===== CARD MUTATIONS PER ANIME ===== */
body.mutate-aot .card,body.mutate-aot .tricky-card{border-left:3px solid rgba(232,93,58,.25)!important;box-shadow:0 0 20px rgba(232,93,58,.05)!important}
body.mutate-aot h2{text-shadow:0 0 8px rgba(232,93,58,.15)!important}

body.mutate-cyber .card,body.mutate-cyber .exam-card{border-left:3px solid rgba(14,165,233,.2)!important;box-shadow:0 0 15px rgba(14,165,233,.04),0 1px 0 rgba(14,165,233,.1)!important}
body.mutate-cyber h2{text-shadow:0 0 6px rgba(14,165,233,.12)!important}

body.mutate-lain .card,body.mutate-lain .code-lab-card{border-left:3px solid rgba(124,106,239,.2)!important;box-shadow:0 0 15px rgba(124,106,239,.04)!important}
body.mutate-lain h2{text-shadow:0 0 6px rgba(124,106,239,.12)!important}

body.mutate-mirror .card{border-left:3px solid rgba(150,150,170,.1)!important;border-radius:2px!important}
body.mutate-mirror h2{letter-spacing:.03em!important}

/* ===== 8 UNIQUE GOD MODES — overlays are real DOM (#god-screen-fx), body classes handle shakes/filters/cards ===== */

/* 1. EREN — Titan steam shake + orange card glow */
body.god-eren{animation:godShakeEren .12s steps(3) infinite}
body.god-eren .card,body.god-eren .tricky-card{border-color:rgba(232,93,58,.3)!important;box-shadow:0 0 25px rgba(232,93,58,.08)!important}
@keyframes godShakeEren{0%{transform:translate(0)}33%{transform:translate(2px,-1px)}66%{transform:translate(-1px,2px)}}

/* 2. V — Neon contrast boost + chrome card borders */
body.god-v .main{filter:contrast(1.08) saturate(1.15)}
body.god-v .card,body.god-v .exam-card{border-color:rgba(14,165,233,.25)!important;box-shadow:0 0 20px rgba(14,165,233,.06),inset 0 0 1px rgba(14,165,233,.1)!important}

/* 3. FOUNDER — Violent earthquake + red card glow */
body.god-founder{animation:founderQuake .08s steps(4) infinite}
body.god-founder .card{border-color:rgba(255,30,20,.2)!important;box-shadow:0 0 30px rgba(255,20,10,.06)!important}
@keyframes founderQuake{0%{transform:translate(0)}25%{transform:translate(3px,-3px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,3px)}}

/* 4. BANDERSNATCH — Desaturation + sharp corners */
body.god-bandersnatch .main{filter:saturate(.6) contrast(1.05)}
body.god-bandersnatch .card{border-radius:0!important;border-color:rgba(150,150,170,.15)!important}

/* 5. LUCY — Dream saturation + pink card glow */
body.god-lucy .main{filter:saturate(1.15) brightness(1.02)}
body.god-lucy .card{border-color:rgba(236,72,153,.18)!important;box-shadow:0 0 20px rgba(236,72,153,.05)!important}
body.god-lucy h2{text-shadow:0 0 12px rgba(236,72,153,.18)!important}

/* 6. COOKIE — Time-frozen desaturation */
body.god-cookie .main{filter:saturate(.3) contrast(1.08) brightness(.95)}
body.god-cookie .card{border-color:rgba(150,150,170,.08)!important;opacity:.88!important}

/* 7. LAIN — CRT jitter + purple card offset */
body.god-lainw{animation:lainWiredJitter .15s steps(3) infinite}
body.god-lainw .card{border-color:rgba(124,106,239,.2)!important;box-shadow:0 0 15px rgba(124,106,239,.05),2px 0 0 rgba(168,85,247,.06)!important}
@keyframes lainWiredJitter{0%{transform:translate(0)}33%{transform:translate(1px,0)}66%{transform:translate(-1px,1px)}}

/* 8. ALICE — Warm sepia + golden card borders */
body.god-alice .main{filter:saturate(.85) brightness(1.03) sepia(.06)}
body.god-alice .card{border-color:rgba(255,180,40,.15)!important;box-shadow:0 0 25px rgba(255,180,40,.05)!important}
body.god-alice h2{text-shadow:0 0 10px rgba(255,180,40,.15)!important}

/* GOD overlay animations (used by #god-screen-fx div) */
@keyframes erenGodPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes vGodSweep{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes founderCrack{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes lucyDream{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes cookieFlicker{0%,90%,100%{opacity:1}92%{opacity:.7}}
@keyframes lainCorrupt{0%,100%{opacity:.6;background-position:0 0}50%{opacity:1;background-position:0 2px}}
@keyframes aliceMemory{0%,100%{opacity:.4}50%{opacity:.8}}

/* ===== FLOATING QUOTE ===== */
.anime-quote{position:fixed;z-index:99995;pointer-events:none;font-size:.7rem;font-weight:700;font-style:italic;color:rgba(230,230,240,.6);text-shadow:0 0 20px currentColor;animation:quoteFloat 3s ease-out forwards;white-space:nowrap}
@keyframes quoteFloat{0%{opacity:0;transform:translateY(0) scale(.8)}15%{opacity:.8;transform:translateY(-10px) scale(1)}85%{opacity:.6;transform:translateY(-40px)}100%{opacity:0;transform:translateY(-60px)}}

/* ===== TRAIL + BURST PARTICLES ===== */
.trail-particle{position:fixed;pointer-events:none;z-index:99996;border-radius:50%;animation:trailDie .8s ease-out forwards}
@keyframes trailDie{to{opacity:0;transform:scale(0) translateY(-15px)}}
.burst-particle{position:fixed;pointer-events:none;z-index:99996;border-radius:50%;animation:burstOut .7s ease-out forwards}
@keyframes burstOut{to{opacity:0;transform:scale(0)}}

/* GOD overlay flash */
.god-overlay{position:fixed;inset:0;z-index:99990;pointer-events:none;animation:godFlash .8s ease-out forwards}
@keyframes godFlash{0%{opacity:.35}100%{opacity:0}}

/* GOD warning banner */
.god-warning{position:fixed;top:75px;left:50%;transform:translateX(-50%);z-index:99999;font-size:.55rem;font-weight:700;color:rgba(239,68,68,.7);padding:5px 16px;border:1px solid rgba(239,68,68,.25);border-radius:6px;background:rgba(10,10,14,.92);animation:warnPulse 1.5s ease-in-out infinite;letter-spacing:.1em;backdrop-filter:blur(8px)}
@keyframes warnPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Power notification */
.power-notif{position:fixed;top:75px;left:50%;transform:translateX(-50%);z-index:99999;background:rgba(8,8,14,.96);border-radius:14px;padding:16px 28px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 50px rgba(0,0,0,.6);backdrop-filter:blur(14px);animation:notifIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes notifIn{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.95)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.power-notif .n-icon{font-size:2rem}
.power-notif .n-title{font-size:.75rem;font-weight:800;color:#f0b429}
.power-notif .n-name{font-size:.9rem;font-weight:800;color:#e8ecf4}
.power-notif .n-persona{font-size:.55rem;color:rgba(200,200,220,.4);font-style:italic}

/* Scroll intensity bar */
#scroll-intensity{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:9997;width:3px;height:100px;background:rgba(30,30,50,.3);border-radius:2px;overflow:hidden}
#scroll-intensity-fill{width:100%;background:linear-gradient(180deg,#f0b429,#ef4444);border-radius:2px;transition:height .3s;height:0%}

@media(max-width:768px){
  #powers-drawer{width:280px;padding:14px}
  .power-card{padding:8px 10px}
  .cursor-eren,.cursor-founder{width:40px!important;height:40px!important}
}