/* PyForm — PvP attack/defense visual effects */ @keyframes pfFlashFade { 0% { opacity: 0.95; } 100% { opacity: 0; } } @keyframes pfShake { 0%, 100% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(-6px, -2px) rotate(-0.4deg); } 25% { transform: translate(-8px, 3px) rotate(-0.8deg); } 40% { transform: translate(7px, -3px) rotate(0.5deg); } 55% { transform: translate(-5px, 4px) rotate(-0.3deg); } 70% { transform: translate(8px, 2px) rotate(0.7deg); } 85% { transform: translate(-3px, -3px) rotate(-0.4deg); } } .pf-shake { animation: pfShake 0.18s linear infinite; } @keyframes pfAttackPopIn { 0% { transform: scale(0.5) translateY(-50px); opacity: 0; } 70% { transform: scale(1.05) translateY(5px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } } @keyframes pfShieldPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 179, 237, 0.65); } 50% { box-shadow: 0 0 0 14px rgba(99, 179, 237, 0); } } @keyframes pfFakeErrorGlitch { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-1px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 1px); } } @keyframes pfConfettiFall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0.85; } } @keyframes pfBannerSlide { 0% { transform: translate(-50%, -120%); opacity: 0; } 10% { transform: translate(-50%, 0); opacity: 1; } 90% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -120%); opacity: 0; } } /* Light Overload theme — applied via [data-pf-attack="blinding"] on */ html[data-pf-attack="blinding"], html[data-pf-attack="blinding"] body { background: #ffffff !important; color: #000000 !important; filter: contrast(1.15) brightness(1.05); transition: background 0.2s ease, color 0.2s ease; } /* Shared overlay primitives */ .pf-attack-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; } .pf-attack-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100000; background: rgba(12, 13, 30, 0.97); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 18px; padding: 24px 28px; min-width: 320px; max-width: 90vw; font-family: 'Sora', system-ui, sans-serif; color: #fff; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; backdrop-filter: blur(28px); animation: pfAttackPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .pf-attack-popup--defense { border-color: rgba(34, 211, 238, 0.4); animation: pfAttackPopIn 0.4s ease, pfShieldPulse 1.4s ease infinite; } .pf-attack-banner { position: fixed; top: 24px; left: 50%; transform: translate(-50%, 0); z-index: 99998; background: rgba(12, 13, 30, 0.95); border: 1px solid rgba(245, 158, 11, 0.4); color: #fbbf24; padding: 10px 22px; border-radius: 99px; font-family: 'Sora', system-ui, sans-serif; font-size: 13px; font-weight: 700; backdrop-filter: blur(20px); animation: pfBannerSlide 5s ease forwards; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); pointer-events: none; } .pf-confetti-piece { position: fixed; top: 0; width: 8px; height: 14px; border-radius: 2px; pointer-events: none; will-change: transform; z-index: 99997; } .pf-fake-error { background: #1a0202 !important; border: 2px solid #ef4444 !important; color: #fecaca !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; animation: pfFakeErrorGlitch 0.18s linear infinite; } .pf-fake-error .pf-attack-title { color: #ef4444; font-weight: 900; letter-spacing: 0.04em; }