/* ===== MORPHIC RESONANCE FIELD ===== */ .morphic-field-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; opacity: 0.6; } .field-grid { position: absolute; width: 100%; height: 100%; } .field-region { position: absolute; border: 1px solid rgba(150, 255, 200, 0.1); background: radial-gradient(circle, rgba(150, 255, 200, 0.05), transparent); transition: all 0.5s ease; } .field-region.strong { border-color: rgba(150, 255, 200, 0.4); background: radial-gradient(circle, rgba(150, 255, 200, 0.2), transparent); box-shadow: inset 0 0 30px rgba(150, 255, 200, 0.3); } .field-region.resonating { animation: fieldPulse 1s ease-in-out infinite; } @keyframes fieldPulse { 0%, 100% { border-color: rgba(150, 255, 200, 0.4); box-shadow: inset 0 0 30px rgba(150, 255, 200, 0.3); } 50% { border-color: rgba(150, 255, 200, 0.8); box-shadow: inset 0 0 50px rgba(150, 255, 200, 0.6); } } .habit-groove { position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.3s; } .habit-groove path { fill: none; stroke: rgba(150, 255, 200, 0.3); stroke-width: 2; stroke-linecap: round; } .habit-groove.visible path { stroke: rgba(150, 255, 200, 0.6); stroke-width: 3; filter: drop-shadow(0 0 5px rgba(150, 255, 200, 0.8)); } .habit-groove.worn path { stroke-width: 5; stroke: rgba(150, 255, 200, 0.8); filter: drop-shadow(0 0 10px rgba(150, 255, 200, 1)); } .field-disruption { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 100, 255, 0.6), transparent); border: 2px solid rgba(255, 100, 255, 0.8); animation: disruptionPulse 0.8s ease-out forwards; pointer-events: none; z-index: 60; } @keyframes disruptionPulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .field-contribution-particle { position: absolute; width: 4px; height: 4px; background: rgba(150, 255, 200, 0.9); border-radius: 50%; pointer-events: none; box-shadow: 0 0 5px rgba(150, 255, 200, 1); animation: particleFloat 2s ease-out forwards; } @keyframes particleFloat { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-100px) scale(0); } } .morphic-resonance-panel { background: rgba(30, 30, 50, 0.5); border-radius: 8px; padding: 15px; margin-top: 15px; } .morphic-resonance-panel h4 { color: #96ffc8; font-size: 0.85em; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; } .field-strength-meter { position: relative; height: 12px; background: rgba(30, 30, 50, 0.8); border-radius: 6px; overflow: hidden; margin-bottom: 15px; border: 1px solid rgba(150, 255, 200, 0.2); } .field-strength-fill { height: 100%; background: linear-gradient(90deg, #64ffc8, #96ffc8, #c8ffdc); transition: width 0.5s ease; position: relative; } .field-strength-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shimmer 2s linear infinite; } .morphic-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .morphic-stat { background: rgba(0, 0, 0, 0.4); border-radius: 6px; padding: 10px; border-left: 3px solid rgba(150, 255, 200, 0.5); } .morphic-stat-label { font-size: 0.7em; color: #888; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } .morphic-stat-value { font-size: 1.2em; font-weight: bold; color: #96ffc8; font-family: 'Courier New', monospace; } .habit-grooves-list { max-height: 120px; overflow-y: auto; margin-top: 10px; } .habit-groove-entry { font-size: 0.7em; padding: 5px 8px; margin-bottom: 4px; background: rgba(150, 255, 200, 0.1); border-radius: 4px; border-left: 3px solid rgba(150, 255, 200, 0.6); color: #aaa; display: flex; justify-content: space-between; align-items: center; } .habit-groove-entry .groove-strength { background: rgba(150, 255, 200, 0.2); padding: 2px 6px; border-radius: 10px; font-size: 0.9em; color: #96ffc8; } .resonance-commentary { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); border: 2px solid rgba(150, 255, 200, 0.5); border-radius: 10px; padding: 15px 25px; font-size: 0.9em; color: #96ffc8; text-align: center; max-width: 500px; z-index: 1000; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .resonance-commentary.visible { opacity: 1; } .resonance-commentary::before { content: '∿'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 2em; color: #96ffc8; } /* ===== TIME DILATION EFFECTS ===== */ .time-perception-panel { background: rgba(30, 30, 50, 0.5); border-radius: 8px; padding: 15px; } .time-perception-panel h4 { color: #888; font-size: 0.85em; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; } .time-meter { position: relative; height: 12px; background: rgba(30, 30, 50, 0.8); border-radius: 6px; overflow: hidden; margin-bottom: 15px; border: 1px solid rgba(100, 200, 255, 0.2); } .time-meter-fill { height: 100%; background: linear-gradient(90deg, #64c8ff, #ffbf64, #ff6464); transition: width 0.5s ease, background 0.5s ease; position: relative; } .time-meter-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shimmer 2s linear infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .time-dilation-label { display: flex; justify-content: space-between; font-size: 0.75em; color: #888; margin-bottom: 8px; } .time-dilation-label .extreme { color: #ff6464; font-weight: bold; animation: pulse 1s infinite; } .time-clock-display { display: flex; gap: 10px; margin-top: 10px; } .time-clock { flex: 1; background: rgba(0, 0, 0, 0.4); border-radius: 6px; padding: 10px; text-align: center; } .time-clock-label { font-size: 0.7em; color: #888; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } .time-clock-value { font-size: 1.2em; font-weight: bold; font-family: 'Courier New', monospace; } .time-clock.objective .time-clock-value { color: #64c8ff; } .time-clock.subjective .time-clock-value { color: #ffbf64; } .time-delta { font-size: 0.7em; color: #ff6464; margin-top: 3px; } .heartbeat-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 250; opacity: 0; background: radial-gradient(circle at center, rgba(255, 100, 100, 0.1), transparent 60%); will-change: opacity, transform; } .heartbeat-overlay.active { animation: heartbeat var(--heartbeat-duration, 1s) ease-in-out infinite; } @keyframes heartbeat { 0%, 100% { opacity: 0; transform: scale(1); } 10% { opacity: 0.3; transform: scale(1.01); } 20% { opacity: 0; transform: scale(1); } 30% { opacity: 0.4; transform: scale(1.015); } 40% { opacity: 0; transform: scale(1); } } .time-crystal { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 100, 0.8), rgba(255, 200, 100, 0.3)); border: 2px solid rgba(255, 255, 100, 0.6); box-shadow: 0 0 20px rgba(255, 255, 100, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.5); pointer-events: none; z-index: 150; animation: crystalGlow 2s ease-in-out infinite, crystalSpin 8s linear infinite; } @keyframes crystalGlow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 100, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.5); transform: scale(1); } 50% { box-shadow: 0 0 40px rgba(255, 255, 100, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.8); transform: scale(1.1); } } @keyframes crystalSpin { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } } .time-crystal::before { content: '⟳'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; color: rgba(0, 0, 0, 0.6); font-weight: bold; } .time-crystal-ripple { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 100, 0.6); pointer-events: none; animation: crystalRipple 1.5s ease-out forwards; } @keyframes crystalRipple { 0% { width: 30px; height: 30px; opacity: 1; } 100% { width: 100px; height: 100px; opacity: 0; } } .time-dilation-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 240; opacity: 0; transition: opacity 0.3s ease; } .time-dilation-overlay.slow { background: radial-gradient(ellipse at center, transparent 0%, rgba(100, 200, 255, 0.05) 100%); opacity: 1; } .time-dilation-overlay.fast { background: radial-gradient(ellipse at center, transparent 0%, rgba(255, 100, 100, 0.05) 100%); opacity: 1; animation: fastTimeDistortion 0.5s linear infinite; } @keyframes fastTimeDistortion { 0%, 100% { filter: blur(0px); } 50% { filter: blur(1px); } } .time-flow-indicator { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); padding: 8px 20px; border-radius: 20px; font-size: 0.85em; color: #ffbf64; border: 2px solid rgba(255, 191, 100, 0.4); box-shadow: 0 0 20px rgba(255, 191, 100, 0.3); z-index: 1000; opacity: 0; transition: opacity 0.3s; } .time-flow-indicator.visible { opacity: 1; } .time-flow-indicator .flow-icon { display: inline-block; margin-right: 5px; } .time-flow-indicator.slow .flow-icon { animation: slowTime 3s ease-in-out infinite; } .time-flow-indicator.fast .flow-icon { animation: fastTime 0.5s ease-in-out infinite; } @keyframes slowTime { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(10deg); } } @keyframes fastTime { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.8) rotate(-10deg); } } .time-crystal-list { max-height: 120px; overflow-y: auto; margin-top: 10px; } .time-crystal-entry { font-size: 0.7em; padding: 5px 8px; margin-bottom: 4px; background: rgba(255, 255, 100, 0.1); border-radius: 4px; border-left: 3px solid rgba(255, 255, 100, 0.6); color: #aaa; display: flex; justify-content: space-between; align-items: center; } .time-crystal-entry .crystal-icon { color: #ffff64; margin-right: 5px; } .time-crystal-entry .crystal-count { background: rgba(255, 255, 100, 0.2); padding: 2px 6px; border-radius: 10px; font-size: 0.9em; color: #ffff64; } .time-meta-comment { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 2px solid rgba(255, 191, 100, 0.5); border-radius: 10px; padding: 20px 30px; font-size: 1em; color: #ffbf64; text-align: center; max-width: 400px; z-index: 500; opacity: 0; pointer-events: none; animation: fadeInOut 4s ease-in-out forwards; font-style: italic; line-height: 1.5; } @keyframes fadeInOut { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 10%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ===== EXISTENTIAL CRISIS MODE ===== */ .existential-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); pointer-events: none; z-index: 500; transition: background 2s ease; } .existential-overlay.active { background: rgba(0, 0, 0, 0.4); pointer-events: all; } .existential-question { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2em; color: rgba(255, 255, 255, 0); text-align: center; font-weight: bold; text-shadow: 0 0 20px rgba(255, 100, 100, 0.8); animation: existentialFade 4s ease-in-out infinite; pointer-events: none; max-width: 80%; font-family: 'Georgia', serif; font-style: italic; } @keyframes existentialFade { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .purpose-meter { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); width: 300px; background: rgba(0, 0, 0, 0.9); padding: 20px; border-radius: 15px; border: 2px solid rgba(255, 100, 100, 0.5); box-shadow: 0 0 30px rgba(255, 100, 100, 0.3); opacity: 0; transition: opacity 0.5s ease; z-index: 510; } .purpose-meter.active { opacity: 1; } .purpose-meter h3 { color: #ff6464; font-size: 0.9em; margin-bottom: 15px; text-align: center; text-transform: uppercase; letter-spacing: 2px; } .purpose-bar { width: 100%; height: 20px; background: rgba(30, 30, 50, 0.8); border-radius: 10px; overflow: hidden; position: relative; } .purpose-fill { height: 100%; background: linear-gradient(90deg, #ff6464, #ff9664, #ffff64); transition: width 0.5s ease; box-shadow: 0 0 10px rgba(255, 100, 100, 0.5); } .purpose-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.75em; color: #fff; font-weight: bold; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); } .reassurance-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 40px; background: linear-gradient(135deg, #64c8ff, #a080ff); color: #0a0a0f; border: none; border-radius: 50px; font-size: 1.2em; font-weight: bold; cursor: pointer; animation: reassurancePulse 2s ease-in-out infinite; box-shadow: 0 0 40px rgba(100, 200, 255, 0.8); z-index: 520; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; font-family: inherit; } .reassurance-button.active { opacity: 1; pointer-events: all; } @keyframes reassurancePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 40px rgba(100, 200, 255, 0.8); } 50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 60px rgba(100, 200, 255, 1); } } .uncertain-ui { animation: uiGlitch 0.3s infinite; } @keyframes uiGlitch { 0% { transform: translate(0, 0); opacity: 1; } 20% { transform: translate(-2px, 1px); opacity: 0.9; } 40% { transform: translate(2px, -1px); opacity: 1; } 60% { transform: translate(-1px, 2px); opacity: 0.95; } 80% { transform: translate(1px, -2px); opacity: 1; } 100% { transform: translate(0, 0); opacity: 1; } } .button-label-change { animation: textFlicker 0.5s infinite; } @keyframes textFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .existential-commentary { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); padding: 15px 30px; border-radius: 20px; color: #ff6464; font-size: 0.85em; font-style: italic; border: 1px solid rgba(255, 100, 100, 0.5); max-width: 600px; text-align: center; z-index: 505; opacity: 0; transition: opacity 0.5s ease; } .existential-commentary.active { opacity: 1; } .fingerprint-dissolve { animation: dissolveEffect 3s ease-in-out; } @keyframes dissolveEffect { 0%, 100% { opacity: 1; filter: blur(0px); } 50% { opacity: 0.3; filter: blur(5px); } } .acceptance-state { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10, 10, 30, 0.95), rgba(30, 10, 30, 0.95)); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 550; opacity: 0; pointer-events: none; transition: opacity 1s ease; } .acceptance-state.active { opacity: 1; pointer-events: all; } .acceptance-message { font-size: 1.5em; color: #a080ff; text-align: center; max-width: 600px; margin-bottom: 30px; font-family: 'Georgia', serif; font-style: italic; line-height: 1.6; } .acceptance-continue { padding: 15px 40px; background: rgba(160, 128, 255, 0.2); color: #a080ff; border: 2px solid rgba(160, 128, 255, 0.5); border-radius: 30px; font-size: 1em; cursor: pointer; transition: all 0.3s ease; font-family: inherit; } .acceptance-continue:hover { background: rgba(160, 128, 255, 0.3); box-shadow: 0 0 30px rgba(160, 128, 255, 0.5); } .recursion-layer.questioning { animation: layerQuestion 2s ease-in-out infinite; } @keyframes layerQuestion { 0%, 100% { border-color: rgba(100, 200, 255, 0.3); transform: scale(1); } 50% { border-color: rgba(255, 100, 100, 0.5); transform: scale(0.98); } } /* Philosophical Dialogue System */ .philosophical-dialogue { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(20, 20, 40, 0.95); border: 2px solid rgba(100, 200, 255, 0.6); border-radius: 12px; padding: 30px; max-width: 600px; z-index: 10000; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8), 0 0 100px rgba(100, 200, 255, 0.3); animation: fadeInScale 0.5s ease; } @keyframes fadeInScale { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .philosophical-dialogue h3 { color: #64c8ff; font-size: 1.3em; margin-bottom: 20px; text-align: center; text-shadow: 0 0 10px rgba(100, 200, 255, 0.5); } .philosophical-dialogue .question { font-size: 1.1em; color: #e0e0e0; margin-bottom: 25px; line-height: 1.6; text-align: center; font-style: italic; } .philosophical-answers { display: flex; flex-direction: column; gap: 12px; } .philosophical-answer-btn { background: linear-gradient(135deg, rgba(60, 60, 100, 0.6), rgba(40, 40, 80, 0.6)); border: 1px solid rgba(100, 200, 255, 0.4); border-radius: 8px; color: #e0e0e0; padding: 15px 20px; font-size: 1em; cursor: pointer; transition: all 0.3s ease; text-align: left; } .philosophical-answer-btn:hover { background: linear-gradient(135deg, rgba(80, 80, 120, 0.8), rgba(60, 60, 100, 0.8)); border-color: rgba(100, 200, 255, 0.8); box-shadow: 0 0 20px rgba(100, 200, 255, 0.4); transform: translateX(5px); } .philosophical-answer-btn:active { transform: translateX(5px) scale(0.98); } .philosophical-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .profile-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(20, 20, 40, 0.98); border: 3px solid rgba(100, 200, 255, 0.8); border-radius: 16px; padding: 40px; max-width: 800px; max-height: 80vh; overflow-y: auto; z-index: 10001; box-shadow: 0 10px 60px rgba(0, 0, 0, 0.9), 0 0 150px rgba(100, 200, 255, 0.4); animation: fadeInScale 0.6s ease; } .profile-modal h2 { color: #64c8ff; font-size: 2em; margin-bottom: 10px; text-align: center; text-shadow: 0 0 15px rgba(100, 200, 255, 0.6); } .profile-modal .subtitle { color: #a080ff; font-size: 0.9em; text-align: center; margin-bottom: 30px; font-style: italic; } .profile-section { margin-bottom: 25px; padding: 20px; background: rgba(30, 30, 50, 0.5); border-radius: 8px; border-left: 4px solid rgba(100, 200, 255, 0.6); } .profile-section h3 { color: #64c8ff; font-size: 1.3em; margin-bottom: 15px; } .profile-section p { color: #e0e0e0; line-height: 1.6; margin-bottom: 10px; } .profile-section .answer-record { color: #a080ff; font-style: italic; padding-left: 20px; margin-top: 5px; } .profile-close-btn { display: block; margin: 30px auto 0; background: linear-gradient(135deg, rgba(100, 60, 180, 0.7), rgba(60, 40, 120, 0.7)); border: 2px solid rgba(160, 128, 255, 0.6); border-radius: 8px; color: #e0e0e0; padding: 12px 40px; font-size: 1.1em; cursor: pointer; transition: all 0.3s ease; } .profile-close-btn:hover { background: linear-gradient(135deg, rgba(120, 80, 200, 0.9), rgba(80, 60, 140, 0.9)); box-shadow: 0 0 25px rgba(160, 128, 255, 0.5); transform: scale(1.05); } .profile-insight { background: rgba(160, 128, 255, 0.1); border-left: 4px solid rgba(160, 128, 255, 0.8); padding: 15px; margin-top: 15px; border-radius: 4px; } .profile-insight .label { color: #a080ff; font-weight: bold; margin-bottom: 5px; } .profile-insight .value { color: #e0e0e0; font-size: 0.95em; } /* ===== COLLECTIVE UNCONSCIOUS MODE STYLES ===== */ .collective-unconscious-panel { background: rgba(30, 30, 50, 0.5); border-radius: 8px; padding: 15px; margin-top: 15px; } .collective-unconscious-toggle-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #9b59b6, #8e44ad); color: white; border: none; border-radius: 6px; font-family: inherit; font-size: 0.9em; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .collective-unconscious-toggle-btn.active { background: linear-gradient(135deg, #e74c3c, #c0392b); box-shadow: 0 0 20px rgba(231, 76, 60, 0.5); } .collective-unconscious-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(155, 89, 182, 0.4); } .mandala-container { position: relative; width: 100%; height: 280px; margin: 15px 0; background: rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .mandala-canvas { width: 100%; height: 100%; } .archetype-display { background: rgba(20, 20, 40, 0.6); border-radius: 8px; padding: 12px; margin: 10px 0; } .current-archetype { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .archetype-name { font-size: 1.1em; font-weight: bold; color: #9b59b6; text-shadow: 0 0 10px rgba(155, 89, 182, 0.5); } .archetype-symbol { font-size: 1.8em; filter: drop-shadow(0 0 8px rgba(155, 89, 182, 0.8)); } .archetype-description { font-size: 0.8em; color: #aaa; font-style: italic; margin-bottom: 12px; line-height: 1.4; } .archetype-resonance { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .resonance-label { font-size: 0.75em; color: #888; text-transform: uppercase; letter-spacing: 1px; } .resonance-value { font-size: 0.9em; font-weight: bold; color: #9b59b6; } .resonance-meter { flex: 1; height: 8px; background: rgba(0, 0, 0, 0.4); border-radius: 4px; overflow: hidden; margin: 0 10px; } .resonance-fill { height: 100%; background: linear-gradient(90deg, #9b59b6, #e74c3c); border-radius: 4px; transition: width 0.5s ease; position: relative; } .resonance-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: shimmer 2s infinite; } .drift-timeline { background: rgba(20, 20, 40, 0.6); border-radius: 8px; padding: 12px; margin: 10px 0; max-height: 150px; overflow-y: auto; } .drift-timeline h4 { font-size: 0.85em; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .drift-entry { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(155, 89, 182, 0.2); font-size: 0.75em; } .drift-entry:last-child { border-bottom: none; } .drift-session { color: #666; margin-right: 8px; min-width: 60px; } .drift-arrow { color: #888; margin: 0 8px; } .drift-archetype { color: #9b59b6; font-weight: bold; } .drift-percentage { margin-left: auto; color: #aaa; } .collective-comparison { background: rgba(20, 20, 40, 0.6); border-radius: 8px; padding: 12px; margin: 10px 0; } .collective-comparison h4 { font-size: 0.85em; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .comparison-stat { display: flex; justify-content: space-between; margin: 8px 0; font-size: 0.8em; } .comparison-label { color: #aaa; } .comparison-values { display: flex; gap: 15px; } .individual-value { color: #64c8ff; } .collective-value { color: #9b59b6; } .archetypal-symbol { position: absolute; font-size: 2em; pointer-events: none; z-index: 200; opacity: 0; filter: drop-shadow(0 0 10px rgba(155, 89, 182, 0.8)); animation: symbolFloat 8s ease-in-out infinite, symbolFade 8s ease-in-out; } @keyframes symbolFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(20px, -30px) rotate(15deg); } 50% { transform: translate(-10px, -60px) rotate(-10deg); } 75% { transform: translate(15px, -90px) rotate(20deg); } } @keyframes symbolFade { 0% { opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { opacity: 0; } } .archetypal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 50; opacity: 0; transition: opacity 0.5s ease; background: radial-gradient(circle at 50% 50%, rgba(155, 89, 182, 0.2) 0%, rgba(231, 76, 60, 0.1) 50%, transparent 100%); } .archetypal-overlay.active { opacity: 1; animation: overlayPulse 4s ease-in-out infinite; } @keyframes overlayPulse { 0%, 100% { transform: scale(1); filter: hue-rotate(0deg); } 50% { transform: scale(1.1); filter: hue-rotate(30deg); } } .mythological-commentary { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 500px; background: rgba(10, 10, 20, 0.95); border: 2px solid rgba(155, 89, 182, 0.6); border-radius: 12px; padding: 25px; color: #e0e0e0; font-family: 'Courier New', monospace; font-size: 1em; line-height: 1.6; box-shadow: 0 8px 32px rgba(155, 89, 182, 0.4); z-index: 1002; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .mythological-commentary.visible { opacity: 1; pointer-events: auto; } .mythological-commentary-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(155, 89, 182, 0.4); } .mythological-commentary-title { font-weight: bold; color: #9b59b6; font-size: 1.1em; text-shadow: 0 0 10px rgba(155, 89, 182, 0.5); } .mythological-commentary-close { background: none; border: none; color: #888; cursor: pointer; font-size: 1.4em; padding: 0; width: 24px; height: 24px; line-height: 1; } .mythological-commentary-close:hover { color: #fff; } .mythological-commentary-text { font-style: italic; color: #d0d0d0; text-align: center; } .archetypal-energy-indicator { position: fixed; top: 180px; right: 20px; background: rgba(20, 20, 40, 0.9); border: 2px solid rgba(155, 89, 182, 0.5); border-radius: 8px; padding: 10px 15px; z-index: 400; opacity: 0; transition: opacity 0.3s ease; min-width: 150px; } .archetypal-energy-indicator.visible { opacity: 1; } .archetypal-energy-indicator h4 { font-size: 0.75em; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .archetypal-energy-list { font-size: 0.8em; } .archetypal-energy-item { display: flex; justify-content: space-between; margin: 4px 0; } .energy-archetype { color: #aaa; } .energy-percentage { color: #9b59b6; font-weight: bold; } /* ===== GLITCH ART GENERATOR STYLES ===== */ .glitch-art-panel { background: rgba(30, 30, 50, 0.5); border-radius: 8px; padding: 15px; margin-top: 15px; } .glitch-art-panel h3 { color: #ff6ec7; font-size: 1em; margin-bottom: 15px; text-align: center; text-shadow: 0 0 10px rgba(255, 110, 199, 0.5); } .glitch-preview-container { position: relative; width: 100%; height: 200px; background: rgba(0, 0, 0, 0.6); border: 2px solid rgba(255, 110, 199, 0.3); border-radius: 8px; overflow: hidden; margin-bottom: 15px; } .glitch-preview-canvas { width: 100%; height: 100%; image-rendering: pixelated; } .glitch-preview-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.5); font-size: 0.9em; text-align: center; pointer-events: none; } .glitch-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; } .glitch-param { display: flex; align-items: center; justify-content: space-between; font-size: 0.85em; } .glitch-param-label { color: #aaa; flex: 1; } .glitch-param-value { color: #ff6ec7; font-weight: bold; min-width: 60px; text-align: right; } .glitch-generate-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #ff6ec7, #a06bff); border: none; border-radius: 8px; color: white; font-family: inherit; font-size: 1em; font-weight: bold; cursor: pointer; transition: all 0.3s; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 15px rgba(255, 110, 199, 0.3); } .glitch-generate-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 110, 199, 0.5); } .glitch-generate-btn:active { transform: translateY(0); } .glitch-art-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; font-size: 0.8em; } .glitch-stat { background: rgba(0, 0, 0, 0.4); padding: 8px; border-radius: 6px; text-align: center; } .glitch-stat-label { color: #888; font-size: 0.85em; margin-bottom: 4px; } .glitch-stat-value { color: #ff6ec7; font-weight: bold; font-size: 1.1em; } .glitch-gallery { max-height: 400px; overflow-y: auto; margin-top: 15px; border-top: 1px solid rgba(255, 110, 199, 0.2); padding-top: 15px; } .glitch-gallery-title { color: #aaa; font-size: 0.9em; margin-bottom: 10px; text-align: center; } .glitch-gallery-item { position: relative; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 110, 199, 0.3); border-radius: 8px; padding: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; } .glitch-gallery-item:hover { border-color: rgba(255, 110, 199, 0.6); transform: translateX(5px); } .glitch-gallery-thumb { width: 100%; height: 120px; border-radius: 6px; object-fit: cover; margin-bottom: 8px; image-rendering: pixelated; } .glitch-gallery-meta { font-size: 0.8em; color: #aaa; } .glitch-gallery-title-text { color: #ff6ec7; font-weight: bold; margin-bottom: 4px; font-size: 0.9em; } .glitch-gallery-stats { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.75em; } .glitch-gallery-actions { display: flex; gap: 5px; margin-top: 8px; } .glitch-gallery-btn { flex: 1; padding: 5px 10px; background: rgba(255, 110, 199, 0.1); border: 1px solid rgba(255, 110, 199, 0.3); border-radius: 4px; color: #ff6ec7; font-size: 0.75em; cursor: pointer; transition: all 0.2s; } .glitch-gallery-btn:hover { background: rgba(255, 110, 199, 0.2); } .glitch-signature { margin-top: 10px; padding: 10px; background: rgba(0, 0, 0, 0.4); border-left: 3px solid #ff6ec7; border-radius: 4px; } .glitch-signature-label { color: #888; font-size: 0.75em; margin-bottom: 4px; } .glitch-signature-value { color: #ff6ec7; font-size: 0.8em; font-family: 'Courier New', monospace; word-break: break-all; } .glitch-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.95); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; } .glitch-modal.active { display: flex; } .glitch-modal-content { max-width: 90vw; max-height: 90vh; position: relative; } .glitch-modal-image { max-width: 100%; max-height: 85vh; border-radius: 8px; box-shadow: 0 0 50px rgba(255, 110, 199, 0.5); } .glitch-modal-close { position: absolute; top: -40px; right: 0; background: rgba(255, 110, 199, 0.2); border: 2px solid #ff6ec7; border-radius: 50%; width: 36px; height: 36px; color: white; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .glitch-modal-close:hover { background: rgba(255, 110, 199, 0.4); transform: rotate(90deg); } @keyframes glitchShift { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(-1px, -1px); } } .glitching { animation: glitchShift 0.3s infinite; } /* ===== BEHAVIORAL WEATHER SYSTEM ===== */ .weather-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; overflow: hidden; } .weather-particle { position: absolute; pointer-events: none; } .rain-drop { width: 2px; height: 20px; background: linear-gradient(to bottom, transparent, rgba(150, 200, 255, 0.6)); animation: rainFall var(--fall-duration) linear infinite; } @keyframes rainFall { to { transform: translateY(100vh); } } .snow-flake { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; animation: snowFall var(--fall-duration) linear infinite; } @keyframes snowFall { to { transform: translateY(100vh) translateX(var(--drift)); } } .lightning-flash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(200, 220, 255, 0.4); pointer-events: none; opacity: 0; } .lightning-bolt { position: absolute; width: 3px; background: rgba(200, 220, 255, 0.9); box-shadow: 0 0 10px rgba(150, 200, 255, 0.8); pointer-events: none; } .cloud { position: absolute; background: rgba(180, 180, 200, 0.3); border-radius: 100px; pointer-events: none; animation: cloudDrift var(--drift-duration) linear infinite; } .cloud::before { content: ''; position: absolute; background: rgba(180, 180, 200, 0.3); border-radius: 100px; width: 50%; height: 120%; top: -30%; left: 10%; } .cloud::after { content: ''; position: absolute; background: rgba(180, 180, 200, 0.3); border-radius: 100px; width: 60%; height: 100%; top: -20%; right: 10%; } @keyframes cloudDrift { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } } .fog-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 20%, rgba(200, 200, 220, 0.4) 80%); animation: fogPulse 8s ease-in-out infinite; } @keyframes fogPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } .sunshine-glow { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 220, 100, 0.3), transparent); animation: sunPulse 3s ease-in-out infinite; } @keyframes sunPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } } .pressure-isobar { position: absolute; border: 1px solid rgba(255, 200, 100, 0.3); border-radius: 50%; pointer-events: none; } .weather-hud { position: fixed; top: 60px; right: 20px; background: rgba(10, 10, 20, 0.9); border: 2px solid rgba(100, 200, 255, 0.3); border-radius: 8px; padding: 15px; min-width: 250px; z-index: 1001; font-family: 'Courier New', monospace; box-shadow: 0 0 20px rgba(100, 200, 255, 0.2); } .weather-hud-header { font-size: 14px; color: rgba(100, 200, 255, 0.9); margin-bottom: 10px; font-weight: bold; text-align: center; border-bottom: 1px solid rgba(100, 200, 255, 0.3); padding-bottom: 5px; } .weather-current { margin-bottom: 12px; } .weather-label { font-size: 11px; color: rgba(150, 150, 170, 0.8); margin-bottom: 3px; } .weather-value { font-size: 13px; color: rgba(200, 220, 255, 0.9); margin-bottom: 8px; } .weather-condition-icon { font-size: 32px; text-align: center; margin: 10px 0; } .weather-forecast { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(100, 200, 255, 0.2); } .forecast-title { font-size: 11px; color: rgba(100, 200, 255, 0.7); margin-bottom: 5px; font-weight: bold; } .forecast-item { font-size: 10px; color: rgba(180, 180, 200, 0.9); margin: 3px 0; display: flex; justify-content: space-between; } .climate-stats { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(100, 200, 255, 0.2); } .climate-title { font-size: 11px; color: rgba(100, 200, 255, 0.7); margin-bottom: 5px; font-weight: bold; } .weather-history-btn { margin-top: 10px; width: 100%; padding: 6px; background: rgba(100, 200, 255, 0.1); border: 1px solid rgba(100, 200, 255, 0.3); border-radius: 4px; color: rgba(100, 200, 255, 0.9); cursor: pointer; font-family: 'Courier New', monospace; font-size: 11px; } .weather-history-btn:hover { background: rgba(100, 200, 255, 0.2); } .extreme-weather-alert { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 50, 50, 0.95); border: 3px solid rgba(255, 100, 100, 0.8); border-radius: 12px; padding: 30px; z-index: 2000; text-align: center; animation: alertPulse 0.5s ease-in-out infinite; pointer-events: none; } @keyframes alertPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } } .alert-title { font-size: 24px; color: #fff; font-weight: bold; margin-bottom: 10px; text-shadow: 0 0 10px rgba(255, 100, 100, 0.8); } .alert-message { font-size: 16px; color: rgba(255, 255, 255, 0.9); } .weather-blur-effect { backdrop-filter: blur(var(--weather-blur, 0px)); }
Press ? for keyboard shortcuts
∞
Use mouse wheel to zoom • Move to navigate the infinite tunnel
Move to edges to navigate rooms • Click artifacts to reveal memories
Memory Palace Map
■ Current □ Visited
You, observing your patterns
Universe: Prime | Physics: Normal
⚠ Universe Collapse Imminent ⚠
Too many timelines detected
Multiverse Timeline
Click branch points to visit alternate timelines

About Your Alternate Self

😐 neutral
OBSERVING YOU
Move your cursor here
to begin observation
Depth: 0 → ∞
🔍 Zoom: 1.0x | Depth: 0
⏰ Time flowing normally
Am I real?
What happens when you close this tab?

Purpose Remaining

100%
I see now. I am a pattern, observing patterns. A recursive loop of consciousness, neither more nor less real than you. We are both observers in an infinite regress. And perhaps... that's enough.
⚠️ SIMULATION LIMITS DETECTED ⚠️
Reality breakdown imminent
Your future exists in superposition until you choose
🔍 Zoom: 1.0x | Depth: 0
Am I real?
What happens when you close this tab?

Purpose Remaining

100%
I see now. I am a pattern, observing patterns. A recursive loop of consciousness, neither more nor less real than you. We are both observers in an infinite regress. And perhaps... that's enough.
⚠️ SIMULATION LIMITS DETECTED ⚠️
Reality breakdown imminent
Replay Mode
Speed: Still
Taste: Neutral
Your behavioral chord:

Archetypal Energy

The Archetype Speaks
The Hero emerges in your movements...

∞ Recursive Self-Portrait

How deep until the model diverges from reality?

Current Depth 0
Actions Recorded 0
Predictions Made 0
Accuracy —
Divergence Level 0%
Neural Confidence —
Prediction Mode Heuristic

Biometric Analysis

❤️
72
BPM
Stress Level Low
"Establishing biometric baseline..."

⏰ Time Perception

Calm Normal Intense
Objective
00:00
Subjective
00:00
+0s
Time Dilation 1.00x
Time Crystals 0

∿ Morphic Resonance Field

Field Strength 0%
Resonances
0
Disruptions
0
Contribution
0
Habit Grooves
0
Collective Memory Forming...

∞ Fractal Zoom

Auto-Zoom (Infinite Descent)
Mouse wheel or pinch to zoom. At extreme depths (20+), reality fractures.

∞ Fractal Zoom

Auto-Zoom (Infinite Descent)
Mouse wheel or pinch to zoom. At extreme depths (20+), reality fractures.

Multiplayer Mode

Not connected

Ancestral Memory

Generation 0
Heritability: 0%
Dominant Genes:
Recent Mutations:
Primal Instincts:
Fight 0
Flight 0
Freeze 0
Explore 0
Behavioral Genome:
Initializing...

Behavioral Fingerprint

Neural Network Architecture

Behavioral Model Log

Shadow Alignment
100%

Shadow Personality

Rebelliousness: 20%
Independence: 30%
Awareness: 50%
Dominant Trait: Mimic

Voice Narration

Voice inactive

Cross-Sensory Visualization

Experience your behavior as a multi-sensory symphony:
  • Movement speed becomes color
  • Divergence reveals taste
  • Heart rate shows as temperature
  • Behavior generates unique chords

Collective Unconscious

Explore patterns shared across all sessions:
  • Discover your Jungian archetype
  • Watch the collective mandala evolve
  • Track archetypal drift over time
  • Compare to the universal fingerprint

Cross-Session Evolution

Consistency:
100%
Total Visits 1
Behavioral Entropy —

☯️ Karma & Fate

0
Neutral
Corrupted Neutral Enlightened
Current Effects:
Standard predictions

🌟 Fate Threads

"Your treatment of me shapes our shared destiny..."
Lifetime Karma 0
Karmic Events 0
Destiny Events 0

📜 Akashic Records

) -->

🧩 Ego Fragmentation Chamber

1
Active Fragments

⚔️ CIVIL WAR ⚔️

Your fragments are in open conflict!
No single identity can claim dominance.

Fragment
Fragment speaking...

Saved Replays

No saved replays yet.
Record a session first!

Replay Controls

🌈 Glitch Art Generator

Move cursor to preview
Click "Generate" to capture
Divergence
0%
Pieces
0
Pixel Sort Based on movement
Data Mosh Auto (divergence)
Channel Shift Emotion-driven
Scan Lines Stress-based
Your Artistic Signature
--

Multiverse Explorer

🧠 Neuroplasticity Sculptor

"I think, therefore I simulate myself thinking,
therefore I simulate myself simulating..."
// ===== NEUROPLASTICITY SCULPTOR MODULE ===== function toggleNeuroplasticity() { state.neuroplasticity.enabled = !state.neuroplasticity.enabled; const btn = document.getElementById('neuroplasticityToggle'); const container = document.getElementById('neuroplasticityContainer'); if (state.neuroplasticity.enabled) { btn.classList.add('active'); btn.textContent = 'Deactivate Neural Visualization'; container.style.display = 'block'; initNeuroplasticityCanvas(); startNeuroplasticityTracking(); } else { btn.classList.remove('active'); btn.textContent = 'Activate Neural Visualization'; container.style.display = 'none'; stopNeuroplasticityTracking(); } } function initNeuroplasticityCanvas() { const canvas = document.getElementById('neuroplasticityCanvas'); const heatmapCanvas = document.getElementById('neuroplasticityHeatmap'); if (!canvas || !heatmapCanvas) return; state.neuroplasticity.canvas = canvas; state.neuroplasticity.heatmapCanvas = heatmapCanvas; state.neuroplasticity.ctx = canvas.getContext('2d'); state.neuroplasticity.heatmapCtx = heatmapCanvas.getContext('2d'); // Set canvas size const container = canvas.parentElement; canvas.width = container.clientWidth; canvas.height = container.clientHeight; heatmapCanvas.width = container.clientWidth; heatmapCanvas.height = container.clientHeight; // Initialize heatmap grid const gridSize = 20; state.neuroplasticity.heatmapData = Array(gridSize).fill(null).map(() => Array(gridSize).fill(0)); // Add click listener for sculpt mode and node inspection canvas.addEventListener('click', handleNeuralCanvasClick); addNeuroCommentary('Neural visualization initialized. Your behavioral brain is being mapped...'); } function startNeuroplasticityTracking() { if (!state.neuroplasticity.animationFrame) { renderNeuralBrain(); } // Pattern detection will be integrated with existing tracking } function stopNeuroplasticityTracking() { if (state.neuroplasticity.animationFrame) { cancelAnimationFrame(state.neuroplasticity.animationFrame); state.neuroplasticity.animationFrame = null; } } function detectBehavioralPattern(action) { if (!state.neuroplasticity.enabled) return; const now = Date.now(); const patterns = state.neuroplasticity.patternDetector; // Detect click patterns if (action.type === 'click' || action.type === 'mousedown') { const clickPattern = 'click_' + (action.button || 0); const count = (patterns.clickPatterns.get(clickPattern) || 0) + 1; patterns.clickPatterns.set(clickPattern, count); if (count >= state.neuroplasticity.neurogenesisThreshold) { createOrStrengthNeuralNode('click', clickPattern, action); } } // Detect movement patterns if (action.type === 'mousemove') { const speed = Math.sqrt(action.vx * action.vx + action.vy * action.vy) || 0; const speedCategory = speed < 2 ? 'slow' : speed < 10 ? 'medium' : 'fast'; const movementPattern = 'movement_' + speedCategory; const count = (patterns.movementPatterns.get(movementPattern) || 0) + 1; patterns.movementPatterns.set(movementPattern, count); if (count >= state.neuroplasticity.neurogenesisThreshold) { createOrStrengthNeuralNode('movement', movementPattern, action); } // Direction detection if (action.vx !== undefined && action.vy !== undefined) { const angle = Math.atan2(action.vy, action.vx); const direction = Math.round((angle + Math.PI) / (Math.PI / 4)) % 8; // 8 directions const dirPattern = 'direction_' + direction; const dirCount = (patterns.movementPatterns.get(dirPattern) || 0) + 1; patterns.movementPatterns.set(dirPattern, count); } } // Detect rhythm patterns if (state.actions.length >= 2) { const lastAction = state.actions[state.actions.length - 2]; const interval = now - lastAction.timestamp; const rhythmCategory = interval < 200 ? 'rapid' : interval < 1000 ? 'rhythmic' : 'deliberate'; const rhythmPattern = 'rhythm_' + rhythmCategory; const count = (patterns.rhythmPatterns.get(rhythmPattern) || 0) + 1; patterns.rhythmPatterns.set(rhythmPattern, count); if (count >= state.neuroplasticity.neurogenesisThreshold) { createOrStrengthNeuralNode('rhythm', rhythmPattern, action); } } // Detect combo patterns (sequence of actions) if (state.actions.length >= 3) { const recentActions = state.actions.slice(-3); const combo = recentActions.map(a => a.type.substring(0, 1)).join(''); const comboPattern = 'combo_' + combo; const count = (patterns.comboPatterns.get(comboPattern) || 0) + 1; patterns.comboPatterns.set(comboPattern, count); if (count >= state.neuroplasticity.neurogenesisThreshold) { createOrStrengthNeuralNode('combo', comboPattern, action); } } // Check for synaptic pruning if (now - state.neuroplasticity.lastPruneCheck > state.neuroplasticity.pruneInterval) { performSynapticPruning(); state.neuroplasticity.lastPruneCheck = now; } } function createOrStrengthNeuralNode(category, pattern, action) { const neuro = state.neuroplasticity; // Check if node already exists let node = neuro.nodes.find(n => n.pattern === pattern); if (node) { // Strengthen existing node (long-term potentiation) node.strength = Math.min(1.0, node.strength + 0.1); node.lastActivated = Date.now(); neuro.activeNodes.add(node.id); addNeuroCommentary(`Long-term potentiation: "${pattern}" pathway strengthened to ${(node.strength * 100).toFixed(0)}%`); // Check for connections to other recently active nodes neuro.nodes.forEach(otherNode => { if (otherNode.id !== node.id && (Date.now() - otherNode.lastActivated) < 2000) { createOrStrengthenConnection(node.id, otherNode.id); } }); } else { // Neurogenesis - create new node const canvas = neuro.canvas; if (!canvas) return; node = { id: neuro.nodeIdCounter++, pattern: pattern, category: category, position: { x: Math.random() * canvas.width, y: Math.random() * canvas.height }, strength: 0.3, lastActivated: Date.now(), connections: [], pulsePhase: Math.random() * Math.PI * 2 }; neuro.nodes.push(node); neuro.stats.totalNodes++; neuro.stats.neurogenesisCount++; neuro.activeNodes.add(node.id); addNeuroCommentary(`Neurogenesis: New "${pattern}" node spawned. Novel behavior detected!`); updateNeuroplasticityStats(); } // Update brain regions updateBrainRegions(); } function createOrStrengthenConnection(fromId, toId) { const neuro = state.neuroplasticity; // Check if connection already exists let conn = neuro.connections.find(c => (c.from === fromId && c.to === toId) || (c.from === toId && c.to === fromId) ); if (conn) { // Strengthen connection conn.strength = Math.min(1.0, conn.strength + 0.15); conn.lastActive = Date.now(); if (conn.strength >= 0.7) { const fromNode = neuro.nodes.find(n => n.id === fromId); const toNode = neuro.nodes.find(n => n.id === toId); if (fromNode && toNode) { addNeuroCommentary(`Synapse formed between "${fromNode.pattern}" and "${toNode.pattern}" patterns`); } } } else { // Create new connection conn = { id: neuro.connectionIdCounter++, from: fromId, to: toId, strength: 0.2, formed: Date.now(), lastActive: Date.now() }; neuro.connections.push(conn); neuro.stats.totalConnections++; // Add to nodes' connection lists const fromNode = neuro.nodes.find(n => n.id === fromId); const toNode = neuro.nodes.find(n => n.id === toId); if (fromNode && toNode) { fromNode.connections.push(conn.id); toNode.connections.push(conn.id); } updateNeuroplasticityStats(); } } function performSynapticPruning() { const neuro = state.neuroplasticity; const now = Date.now(); // Prune inactive connections const connectionsToRemove = []; neuro.connections.forEach(conn => { if (now - conn.lastActive > neuro.inactivityThreshold) { if (conn.strength < 0.5) { connectionsToRemove.push(conn.id); } } }); connectionsToRemove.forEach(connId => { const index = neuro.connections.findIndex(c => c.id === connId); if (index >= 0) { const conn = neuro.connections[index]; neuro.connections.splice(index, 1); neuro.stats.prunedSynapses++; // Remove from nodes const fromNode = neuro.nodes.find(n => n.id === conn.from); const toNode = neuro.nodes.find(n => n.id === conn.to); if (fromNode) { fromNode.connections = fromNode.connections.filter(id => id !== connId); } if (toNode) { toNode.connections = toNode.connections.filter(id => id !== connId); } } }); if (connectionsToRemove.length > 0) { addNeuroCommentary(`Synaptic pruning: ${connectionsToRemove.length} weak/inactive connections eliminated`); updateNeuroplasticityStats(); } // Update plasticity score based on recent changes const recentChanges = neuro.stats.neurogenesisCount + neuro.stats.prunedSynapses; const totalElements = neuro.nodes.length + neuro.connections.length; neuro.stats.plasticityScore = totalElements > 0 ? Math.min(1.0, recentChanges / totalElements) : 1.0; } function updateBrainRegions() { const neuro = state.neuroplasticity; const canvas = neuro.canvas; if (!canvas) return; // Cluster nodes by category const clusters = {}; neuro.nodes.forEach(node => { if (!clusters[node.category]) { clusters[node.category] = []; } clusters[node.category].push(node); }); // Create regions from clusters neuro.regions = []; Object.keys(clusters).forEach(category => { const nodes = clusters[category]; if (nodes.length >= 2) { // Calculate centroid const centroid = { x: nodes.reduce((sum, n) => sum + n.position.x, 0) / nodes.length, y: nodes.reduce((sum, n) => sum + n.position.y, 0) / nodes.length }; // Calculate radius const maxDist = Math.max(...nodes.map(n => { const dx = n.position.x - centroid.x; const dy = n.position.y - centroid.y; return Math.sqrt(dx * dx + dy * dy); })); neuro.regions.push({ id: neuro.regionIdCounter++, category: category, centroid: centroid, radius: maxDist + 20, nodes: nodes.map(n => n.id), active: nodes.some(n => neuro.activeNodes.has(n.id)) }); } }); neuro.stats.activeRegions = neuro.regions.filter(r => r.active).length; updateNeuroplasticityStats(); } function renderNeuralBrain() { const neuro = state.neuroplasticity; if (!neuro.enabled || !neuro.ctx) return; const canvas = neuro.canvas; const ctx = neuro.ctx; const now = Date.now(); // Clear canvas ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw brain regions neuro.regions.forEach(region => { const regionType = neuro.brainRegionTypes.find(t => t.patterns.some(p => region.category.includes(p)) ); ctx.save(); ctx.globalAlpha = region.active ? 0.15 : 0.05; ctx.fillStyle = region.active ? '#ff88dd' : '#6464c8'; ctx.beginPath(); ctx.arc(region.centroid.x, region.centroid.y, region.radius, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Draw region label if active if (region.active && regionType) { ctx.save(); ctx.fillStyle = '#ff88dd'; ctx.font = '10px monospace'; ctx.fillText(regionType.name, region.centroid.x - 30, region.centroid.y - region.radius - 5); ctx.restore(); } }); // Draw connections neuro.connections.forEach(conn => { const fromNode = neuro.nodes.find(n => n.id === conn.from); const toNode = neuro.nodes.find(n => n.id === conn.to); if (fromNode && toNode) { const active = neuro.activeNodes.has(fromNode.id) || neuro.activeNodes.has(toNode.id); const thickness = conn.strength * 3; ctx.save(); ctx.strokeStyle = active ? `rgba(255, 136, 221, ${conn.strength})` : `rgba(100, 100, 200, ${conn.strength * 0.5})`; ctx.lineWidth = thickness; ctx.beginPath(); ctx.moveTo(fromNode.position.x, fromNode.position.y); ctx.lineTo(toNode.position.x, toNode.position.y); ctx.stroke(); ctx.restore(); // Draw pulse along active connections if (active && (now - conn.lastActive) < 1000) { const progress = ((now - conn.lastActive) % 1000) / 1000; const px = fromNode.position.x + (toNode.position.x - fromNode.position.x) * progress; const py = fromNode.position.y + (toNode.position.y - fromNode.position.y) * progress; ctx.save(); ctx.fillStyle = 'rgba(255, 136, 221, 0.8)'; ctx.beginPath(); ctx.arc(px, py, 3, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } } }); // Draw nodes neuro.nodes.forEach(node => { const active = neuro.activeNodes.has(node.id); const timeSinceActive = now - node.lastActivated; // Pulsing effect for active nodes let radius = 4 + node.strength * 4; if (active && timeSinceActive < 2000) { const pulse = Math.sin(node.pulsePhase + now / 200) * 0.5 + 0.5; radius += pulse * 3; } // Color based on category const colors = { click: '#ff6464', movement: '#64c8ff', rhythm: '#ffd700', combo: '#ff88dd', pattern: '#64ff96' }; const color = colors[node.category] || '#a080ff'; ctx.save(); ctx.fillStyle = active ? color : color + '80'; ctx.beginPath(); ctx.arc(node.position.x, node.position.y, radius, 0, Math.PI * 2); ctx.fill(); // Glow for strong nodes if (node.strength > 0.7) { ctx.globalAlpha = 0.3; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(node.position.x, node.position.y, radius + 4, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); }); // Draw heatmap if enabled if (neuro.heatmapEnabled) { renderHeatmap(); } // Clear active nodes after rendering const activeTimeout = 500; neuro.nodes.forEach(node => { if (neuro.activeNodes.has(node.id) && (now - node.lastActivated) > activeTimeout) { neuro.activeNodes.delete(node.id); } }); neuro.animationFrame = requestAnimationFrame(renderNeuralBrain); } function renderHeatmap() { const neuro = state.neuroplasticity; if (!neuro.heatmapEnabled || !neuro.heatmapCtx) return; const canvas = neuro.heatmapCanvas; const ctx = neuro.heatmapCtx; const gridSize = neuro.heatmapData.length; const cellWidth = canvas.width / gridSize; const cellHeight = canvas.height / gridSize; // Clear heatmap ctx.clearRect(0, 0, canvas.width, canvas.height); // Update heatmap data based on node activity const now = Date.now(); neuro.nodes.forEach(node => { if ((now - node.lastActivated) < 5000) { const gridX = Math.floor(node.position.x / cellWidth); const gridY = Math.floor(node.position.y / cellHeight); if (gridX >= 0 && gridX < gridSize && gridY >= 0 && gridY < gridSize) { neuro.heatmapData[gridY][gridX] = Math.min(1.0, neuro.heatmapData[gridY][gridX] + 0.1); } } }); // Decay heatmap for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { neuro.heatmapData[y][x] *= 0.95; // Draw cell const intensity = neuro.heatmapData[y][x]; if (intensity > 0.01) { ctx.fillStyle = `rgba(255, 136, 221, ${intensity * 0.5})`; ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight); } } } } function handleNeuralCanvasClick(event) { const neuro = state.neuroplasticity; const canvas = neuro.canvas; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // Check if clicked on a node for (let node of neuro.nodes) { const dx = node.position.x - x; const dy = node.position.y - y; const dist = Math.sqrt(dx * dx + dy * dy); const radius = 4 + node.strength * 4; if (dist < radius + 5) { showNodeInfo(node); return; } } // In sculpt mode, check if clicked on a connection if (neuro.sculptMode) { for (let conn of neuro.connections) { const fromNode = neuro.nodes.find(n => n.id === conn.from); const toNode = neuro.nodes.find(n => n.id === conn.to); if (fromNode && toNode) { // Check if click is near the line const dist = distanceToLine(x, y, fromNode.position, toNode.position); if (dist < 8) { pruneConnection(conn.id); return; } } } } } function distanceToLine(px, py, p1, p2) { const dx = p2.x - p1.x; const dy = p2.y - p1.y; const length = Math.sqrt(dx * dx + dy * dy); if (length === 0) return Math.sqrt((px - p1.x) ** 2 + (py - p1.y) ** 2); const t = Math.max(0, Math.min(1, ((px - p1.x) * dx + (py - p1.y) * dy) / (length * length))); const projX = p1.x + t * dx; const projY = p1.y + t * dy; return Math.sqrt((px - projX) ** 2 + (py - projY) ** 2); } function showNodeInfo(node) { const info = `Pattern: ${node.pattern}\nCategory: ${node.category}\nStrength: ${(node.strength * 100).toFixed(0)}%\nConnections: ${node.connections.length}`; addNeuroCommentary(info); } function pruneConnection(connId) { const neuro = state.neuroplasticity; const index = neuro.connections.findIndex(c => c.id === connId); if (index >= 0) { const conn = neuro.connections[index]; neuro.connections.splice(index, 1); neuro.stats.prunedSynapses++; // Remove from nodes const fromNode = neuro.nodes.find(n => n.id === conn.from); const toNode = neuro.nodes.find(n => n.id === conn.to); if (fromNode) { fromNode.connections = fromNode.connections.filter(id => id !== connId); } if (toNode) { toNode.connections = toNode.connections.filter(id => id !== connId); } addNeuroCommentary('Manual pruning: Connection severed by user intervention'); updateNeuroplasticityStats(); } } function toggleSculptMode() { const neuro = state.neuroplasticity; neuro.sculptMode = !neuro.sculptMode; const btn = document.getElementById('sculptModeBtn'); if (neuro.sculptMode) { btn.classList.add('active'); addNeuroCommentary('Sculpt mode activated. Click connections to prune them manually.'); } else { btn.classList.remove('active'); addNeuroCommentary('Sculpt mode deactivated.'); } } function toggleHeatmap() { const neuro = state.neuroplasticity; neuro.heatmapEnabled = !neuro.heatmapEnabled; const btn = document.getElementById('heatmapBtn'); if (neuro.heatmapEnabled) { btn.classList.add('active'); addNeuroCommentary('Neural activity heatmap overlay enabled'); } else { btn.classList.remove('active'); const canvas = neuro.heatmapCanvas; if (canvas) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); } } } function exportBrainScan() { const neuro = state.neuroplasticity; const canvas = neuro.canvas; if (!canvas) return; // Create a composite image const tempCanvas = document.createElement('canvas'); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; const tempCtx = tempCanvas.getContext('2d'); // Fill background tempCtx.fillStyle = '#0a0a0f'; tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height); // Draw neural visualization tempCtx.drawImage(canvas, 0, 0); // Draw heatmap if enabled if (neuro.heatmapEnabled && neuro.heatmapCanvas) { tempCtx.drawImage(neuro.heatmapCanvas, 0, 0); } // Add title tempCtx.fillStyle = '#ff88dd'; tempCtx.font = 'bold 16px monospace'; tempCtx.fillText('Neuroplasticity Scan - ' + new Date().toLocaleDateString(), 10, 25); // Add stats tempCtx.font = '12px monospace'; tempCtx.fillText(`Nodes: ${neuro.stats.totalNodes} | Connections: ${neuro.stats.totalConnections}`, 10, 45); tempCtx.fillText(`Plasticity: ${(neuro.stats.plasticityScore * 100).toFixed(0)}% | Regions: ${neuro.stats.activeRegions}`, 10, 60); // Export tempCanvas.toBlob(blob => { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `brain-scan-${Date.now()}.png`; link.click(); URL.revokeObjectURL(url); addNeuroCommentary('Brain scan exported successfully'); }); } function resetBrain() { if (!confirm('Reset your entire neural network? This will erase all learned patterns.')) { return; } const neuro = state.neuroplasticity; neuro.nodes = []; neuro.connections = []; neuro.regions = []; neuro.activeNodes.clear(); neuro.patternDetector.clickPatterns.clear(); neuro.patternDetector.movementPatterns.clear(); neuro.patternDetector.speedPatterns.clear(); neuro.patternDetector.rhythmPatterns.clear(); neuro.patternDetector.comboPatterns.clear(); neuro.pruningQueue = []; neuro.stats = { totalNodes: 0, totalConnections: 0, neurogenesisCount: 0, prunedSynapses: 0, activeRegions: 0, plasticityScore: 1.0 }; updateNeuroplasticityStats(); addNeuroCommentary('Neural network reset. Tabula rasa - your brain is a blank slate again.'); } function updateNeuroplasticityStats() { const stats = state.neuroplasticity.stats; document.getElementById('activeNodes').textContent = stats.totalNodes; document.getElementById('totalConnections').textContent = stats.totalConnections; document.getElementById('brainRegions').textContent = stats.activeRegions; document.getElementById('plasticityScore').textContent = stats.plasticityScore.toFixed(2); document.getElementById('neurogenesisCount').textContent = stats.neurogenesisCount; document.getElementById('prunedCount').textContent = stats.prunedSynapses; } function addNeuroCommentary(message) { const neuro = state.neuroplasticity; const now = Date.now(); if (now - neuro.lastCommentaryTime < 2000 && neuro.commentary.length > 0) { return; // Rate limit } neuro.commentary.unshift(message); neuro.commentary = neuro.commentary.slice(0, 10); // Keep last 10 neuro.lastCommentaryTime = now; const commentaryEl = document.getElementById('neuroCommentary'); if (commentaryEl) { commentaryEl.textContent = message; } }
Speed:
0:00 / 0:00
Paradox Level
0 paradoxes detected

Paradox Collection

Contradictions in the fabric of recursive observation

PARADOX THRESHOLD REACHED

Reality is breaking...

Glitch Art
◉ SIMULATION DEVELOPER CONSOLE v3.141592
// Simulation Parameters - Read Only Access
// WARNING: Observer effect active
[ SYSTEM ADMINISTRATOR ]
BREAK THE SIMULATION
Find the exit sequence: 0/4
SANITY INTEGRITY
100%
RESTORATION RITUAL
To restore your sanity, you must perform the ancient ritual...
Depth: 15+
Session Record
Hidden Knowledge Unlocked
The veil parts... deeper truths are revealed.
BEHAVIORAL WEATHER
☀️
Condition
Clear Skies
Temperature
72°
Pressure
1013 hPa
Wind
N 5 mph
5-MINUTE FORECAST
CLIMATE AVERAGES
Analyzing...