Revert "Cleanup: Remove unused files, Svelte frontend, old UI, and update docs for Streamlit-only architecture"

This reverts commit 08926230de657ac0fb0ec6eba09839ca0552edb3.

ui/__init__.py

@@ -0,0 +1 @@
+# UI module initialization

ui/interfaces.py

@@ -0,0 +1,458 @@
+import gradio as gr
+from typing import Callable, Any, Optional
+import numpy as np
+
+def create_voice_interface(pipeline: Any, game_mechanics: Any) -> gr.Column:
+    """Create voice-controlled interface for monster generation"""
+    
+    with gr.Column() as voice_interface:
+        gr.Markdown("""
+        ### 🎙️ Voice Control Interface
+        Speak your monster description or use the microphone to create your digital companion!
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # Voice input
+                voice_input = gr.Audio(
+                    label="🎤 Voice Description",
+                    sources=["microphone", "upload"],
+                    type="filepath",
+                    elem_classes=["cyber-input"],
+                    info="Describe your monster using voice"
+                )
+                
+                # Voice control buttons
+                with gr.Row():
+                    start_recording = gr.Button(
+                        "🔴 Start Recording",
+                        elem_classes=["cyber-button"],
+                        size="sm"
+                    )
+                    stop_recording = gr.Button(
+                        "⏹️ Stop Recording",
+                        elem_classes=["cyber-button"],
+                        size="sm"
+                    )
+                
+                # Real-time transcription display
+                transcription_display = gr.Textbox(
+                    label="📝 Transcription",
+                    placeholder="Your voice will be transcribed here...",
+                    interactive=False,
+                    lines=3,
+                    elem_classes=["cyber-output"]
+                )
+                
+                # Voice commands
+                gr.Markdown("""
+                **Voice Commands:**
+                - "Create a [type] monster" - Generate specific type
+                - "Make it [color/trait]" - Add characteristics
+                - "Give it [ability]" - Add special abilities
+                """)
+            
+            with gr.Column(scale=1):
+                # Preview and generation status
+                generation_status = gr.Markdown(
+                    value="🟢 Ready for voice input",
+                    elem_classes=["cyber-message"]
+                )
+                
+                # Audio visualization
+                audio_viz = gr.HTML(
+                    value="""
+                    <div class="audio-visualizer">
+                        <div class="bar"></div>
+                        <div class="bar"></div>
+                        <div class="bar"></div>
+                        <div class="bar"></div>
+                        <div class="bar"></div>
+                    </div>
+                    """,
+                    elem_classes=["cyber-container"]
+                )
+                
+                # Quick voice templates
+                gr.Markdown("**Quick Templates:**")
+                template_buttons = []
+                templates = [
+                    ("🔥 Fire Type", "Create a fierce fire-breathing dragon monster"),
+                    ("💧 Water Type", "Create a graceful aquatic monster"),
+                    ("⚡ Electric Type", "Create a sparking electric monster"),
+                    ("🌿 Nature Type", "Create a peaceful nature guardian monster")
+                ]
+                
+                for label, prompt in templates:
+                    btn = gr.Button(label, size="sm", elem_classes=["cyber-button"])
+                    template_buttons.append((btn, prompt))
+        
+        # Voice interface specific styling
+        gr.HTML("""
+        <style>
+        .audio-visualizer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100px;
+            gap: 5px;
+        }
+        
+        .audio-visualizer .bar {
+            width: 10px;
+            height: 30px;
+            background: linear-gradient(to top, #00ff41, #8A2BE2);
+            animation: audio-wave 1s ease-in-out infinite;
+            border-radius: 5px;
+        }
+        
+        .audio-visualizer .bar:nth-child(1) { animation-delay: 0s; }
+        .audio-visualizer .bar:nth-child(2) { animation-delay: 0.1s; }
+        .audio-visualizer .bar:nth-child(3) { animation-delay: 0.2s; }
+        .audio-visualizer .bar:nth-child(4) { animation-delay: 0.3s; }
+        .audio-visualizer .bar:nth-child(5) { animation-delay: 0.4s; }
+        
+        @keyframes audio-wave {
+            0%, 100% { height: 30px; }
+            50% { height: 60px; }
+        }
+        </style>
+        """)
+    
+    return voice_interface
+
+def create_visual_interface(pipeline: Any, game_mechanics: Any) -> gr.Column:
+    """Create visual/camera-based interface for monster generation"""
+    
+    with gr.Column() as visual_interface:
+        gr.Markdown("""
+        ### 👁️ Visual Control Interface
+        Use images, drawings, or camera input to inspire your monster creation!
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # Image input options
+                with gr.Tabs():
+                    with gr.TabItem("📷 Camera"):
+                        camera_input = gr.Image(
+                            label="Camera Capture",
+                            sources=["webcam"],
+                            type="pil",
+                            elem_classes=["cyber-input", "camera-feed"]
+                        )
+                    
+                    with gr.TabItem("🖼️ Upload"):
+                        image_upload = gr.File(
+                            label="Upload Reference Images",
+                            file_count="multiple",
+                            file_types=["image"],
+                            elem_classes=["cyber-input"]
+                        )
+                        
+                        uploaded_gallery = gr.Gallery(
+                            label="Uploaded References",
+                            columns=3,
+                            rows=1,
+                            height="150px",
+                            elem_classes=["cyber-container"]
+                        )
+                    
+                    with gr.TabItem("✏️ Draw"):
+                        sketch_pad = gr.Sketchpad(
+                            label="Draw Your Monster",
+                            type="pil",
+                            elem_classes=["cyber-input", "sketch-pad"]
+                        )
+                
+                # Visual style options
+                gr.Markdown("**Visual Style Options:**")
+                
+                style_modifier = gr.CheckboxGroup(
+                    choices=[
+                        "🎨 Artistic",
+                        "🤖 Mechanical", 
+                        "✨ Magical",
+                        "🌊 Organic",
+                        "💎 Crystalline"
+                    ],
+                    label="Style Modifiers",
+                    elem_classes=["cyber-checkbox"]
+                )
+                
+                color_palette = gr.Radio(
+                    choices=[
+                        "🌈 Vibrant",
+                        "🌑 Dark",
+                        "❄️ Cool",
+                        "🔥 Warm",
+                        "🎨 Custom"
+                    ],
+                    label="Color Palette",
+                    value="🌈 Vibrant",
+                    elem_classes=["cyber-radio"]
+                )
+            
+            with gr.Column(scale=1):
+                # Image analysis display
+                image_analysis = gr.Markdown(
+                    value="📊 Image Analysis Results",
+                    elem_classes=["cyber-message"]
+                )
+                
+                # Detected features
+                detected_features = gr.JSON(
+                    label="🔍 Detected Features",
+                    elem_classes=["cyber-stats"]
+                )
+                
+                # Generation preview
+                preview_placeholder = gr.HTML(
+                    value="""
+                    <div class="preview-container">
+                        <div class="scanning-overlay">
+                            <div class="scan-line"></div>
+                        </div>
+                        <p>Preview will appear here...</p>
+                    </div>
+                    """,
+                    elem_classes=["cyber-container"]
+                )
+                
+                # Confidence meter
+                confidence_display = gr.HTML(
+                    value="""
+                    <div class="confidence-meter">
+                        <label>Generation Confidence:</label>
+                        <div class="meter-bar">
+                            <div class="meter-fill" style="width: 0%"></div>
+                        </div>
+                        <span class="meter-value">0%</span>
+                    </div>
+                    """,
+                    elem_classes=["cyber-container"]
+                )
+        
+        # Visual interface specific styling
+        gr.HTML("""
+        <style>
+        .camera-feed {
+            border: 3px solid #00ff41;
+            border-radius: 10px;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .camera-feed::after {
+            content: 'LIVE';
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: red;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            animation: blink 1s infinite;
+        }
+        
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        
+        .sketch-pad {
+            background: rgba(0, 0, 0, 0.9);
+            border: 2px solid #8A2BE2;
+        }
+        
+        .preview-container {
+            position: relative;
+            height: 200px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        
+        .scanning-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+        }
+        
+        .scan-line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #00ff41, transparent);
+            animation: scan-vertical 2s linear infinite;
+        }
+        
+        @keyframes scan-vertical {
+            0% { top: 0; }
+            100% { top: 100%; }
+        }
+        
+        .confidence-meter {
+            padding: 15px;
+        }
+        
+        .confidence-meter label {
+            color: #8A2BE2;
+            font-size: 14px;
+            margin-bottom: 5px;
+            display: block;
+        }
+        
+        .meter-bar {
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid #00ff41;
+            height: 20px;
+            border-radius: 10px;
+            overflow: hidden;
+            margin: 10px 0;
+        }
+        
+        .meter-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #00ff41, #8A2BE2);
+            transition: width 0.5s ease;
+        }
+        
+        .meter-value {
+            color: #00ff41;
+            font-weight: bold;
+            font-size: 18px;
+        }
+        </style>
+        """)
+    
+    return visual_interface
+
+def create_monster_status_display() -> gr.Column:
+    """Create monster status display component"""
+    
+    with gr.Column() as status_display:
+        # 3D Model viewer
+        model_viewer = gr.Model3D(
+            label="Your Digital Monster",
+            height=400,
+            elem_classes=["monster-display"]
+        )
+        
+        # Status indicators
+        with gr.Row():
+            hp_bar = gr.HTML(
+                value=create_status_bar("HP", 100, 100, "#ff4444"),
+                elem_classes=["status-bar"]
+            )
+            
+            hunger_bar = gr.HTML(
+                value=create_status_bar("Hunger", 80, 100, "#ffaa44"),
+                elem_classes=["status-bar"]
+            )
+            
+            happiness_bar = gr.HTML(
+                value=create_status_bar("Happiness", 90, 100, "#44ff44"),
+                elem_classes=["status-bar"]
+            )
+        
+        # Communication display
+        communication = gr.Textbox(
+            label="Monster Says",
+            value="🤖💚9️⃣0️⃣",
+            interactive=False,
+            elem_classes=["cyber-dialogue"]
+        )
+        
+        # Evolution progress
+        evolution_display = gr.HTML(
+            value="""
+            <div class="evolution-progress">
+                <h4>Evolution Progress</h4>
+                <div class="progress-ring">
+                    <svg width="120" height="120">
+                        <circle cx="60" cy="60" r="50" stroke="#333" stroke-width="10" fill="none"/>
+                        <circle cx="60" cy="60" r="50" stroke="#8A2BE2" stroke-width="10" fill="none"
+                                stroke-dasharray="314" stroke-dashoffset="157"
+                                transform="rotate(-90 60 60)"/>
+                    </svg>
+                    <div class="progress-text">50%</div>
+                </div>
+            </div>
+            """,
+            elem_classes=["evolution-display"]
+        )
+    
+    return status_display
+
+def create_status_bar(label: str, current: int, max_val: int, color: str) -> str:
+    """Create HTML status bar"""
+    percentage = (current / max_val) * 100
+    
+    return f"""
+    <div class="status-bar-container">
+        <label>{label}</label>
+        <div class="status-bar-bg">
+            <div class="status-bar-fill" style="width: {percentage}%; background: {color};"></div>
+        </div>
+        <span class="status-value">{current}/{max_val}</span>
+    </div>
+    """
+
+def create_training_interface() -> gr.Column:
+    """Create training interface component"""
+    
+    with gr.Column() as training_interface:
+        gr.Markdown("""
+        ### 💪 Training Center
+        Train your monster to improve its stats and prepare for evolution!
+        """)
+        
+        # Training schedule
+        with gr.Row():
+            with gr.Column():
+                training_schedule = gr.DataFrame(
+                    headers=["Time", "Activity", "Stat Focus", "Intensity"],
+                    datatype=["str", "str", "str", "number"],
+                    value=[
+                        ["Morning", "Strength Training", "Attack", 7],
+                        ["Afternoon", "Agility Course", "Speed", 5],
+                        ["Evening", "Meditation", "Special", 3]
+                    ],
+                    elem_classes=["cyber-table"]
+                )
+            
+            with gr.Column():
+                # Training mini-game
+                training_game = gr.HTML(
+                    value="""
+                    <div class="training-game">
+                        <h4>Quick Training</h4>
+                        <div class="game-area">
+                            <div class="target" id="training-target"></div>
+                        </div>
+                        <p>Click the targets to train!</p>
+                    </div>
+                    """,
+                    elem_classes=["cyber-container"]
+                )
+                
+                # Training rewards
+                rewards_display = gr.Markdown(
+                    """
+                    **Today's Rewards:**
+                    - 🏆 +15 Attack
+                    - 🛡️ +10 Defense
+                    - ⚡ +5 Speed
+                    """,
+                    elem_classes=["cyber-message"]
+                )
+    
+    return training_interface

ui/themes.py

@@ -0,0 +1,428 @@
+import gradio as gr
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+def get_cyberpunk_theme():
+    """Create cyberpunk-themed Gradio theme"""
+    
+    theme = gr.themes.Base(
+        primary_hue=colors.green,
+        secondary_hue=colors.purple,
+        neutral_hue=colors.gray,
+        font=[fonts.GoogleFont("Orbitron"), "monospace", "sans-serif"],
+    ).set(
+        # Background colors
+        body_background_fill="linear-gradient(135deg, #0a0a0a, #1a0033, #001122)",
+        body_background_fill_dark="linear-gradient(135deg, #050505, #0d001a, #000811)",
+        
+        # Text colors
+        body_text_color="#00ff41",
+        body_text_color_dark="#00ff41",
+        body_text_color_subdued="#8A2BE2",
+        body_text_color_subdued_dark="#8A2BE2",
+        
+        # Component colors
+        background_fill_primary="rgba(0, 255, 65, 0.1)",
+        background_fill_primary_dark="rgba(0, 255, 65, 0.05)",
+        background_fill_secondary="rgba(138, 43, 226, 0.1)",
+        background_fill_secondary_dark="rgba(138, 43, 226, 0.05)",
+        
+        # Borders
+        border_color_primary="#00ff41",
+        border_color_primary_dark="#00ff41",
+        border_color_accent="#8A2BE2",
+        border_color_accent_dark="#8A2BE2",
+        
+        # Shadows
+        shadow_drop="0 0 20px rgba(0, 255, 65, 0.5)",
+        shadow_drop_lg="0 0 30px rgba(138, 43, 226, 0.5)",
+        
+        # Buttons
+        button_primary_background_fill="linear-gradient(45deg, #00ff41, #8A2BE2)",
+        button_primary_background_fill_hover="linear-gradient(45deg, #00ff41, #9932CC)",
+        button_primary_background_fill_dark="linear-gradient(45deg, #00cc33, #7B68EE)",
+        button_primary_text_color="#000000",
+        button_primary_text_color_dark="#000000",
+        
+        # Inputs
+        input_background_fill="rgba(0, 0, 0, 0.8)",
+        input_background_fill_dark="rgba(0, 0, 0, 0.9)",
+        input_border_color="#00ff41",
+        input_border_color_dark="#00ff41",
+        input_border_color_focus="#8A2BE2",
+        input_border_color_focus_dark="#8A2BE2",
+        
+        # Other elements
+        block_background_fill="rgba(0, 0, 0, 0.6)",
+        block_background_fill_dark="rgba(0, 0, 0, 0.8)",
+        block_border_color="#00ff41",
+        block_border_color_dark="#00ff41",
+        block_border_width="2px",
+        block_shadow="0 0 15px rgba(0, 255, 65, 0.3)",
+        
+        # Radius
+        radius_lg="8px",
+        radius_md="6px",
+        radius_sm="4px",
+    )
+    
+    return theme
+
+# Custom CSS for additional cyberpunk styling
+CYBERPUNK_CSS = """
+/* Import cyberpunk font */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
+
+/* Global styles */
+* {
+    font-family: 'Orbitron', monospace !important;
+}
+
+/* Animated background */
+.gradio-container {
+    background: linear-gradient(135deg, #0a0a0a, #1a0033, #001122);
+    background-size: 400% 400%;
+    animation: gradient-shift 15s ease infinite;
+}
+
+@keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Cyber header */
+.cyber-header {
+    background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(26,0,51,0.9));
+    border: 2px solid #00ff41;
+    border-radius: 10px;
+    padding: 30px;
+    margin-bottom: 30px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 0 30px rgba(0,255,65,0.5), inset 0 0 30px rgba(0,255,65,0.1);
+}
+
+.cyber-header::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, #00ff41, #8A2BE2, #00ff41);
+    z-index: -1;
+    animation: border-glow 3s linear infinite;
+    filter: blur(5px);
+}
+
+@keyframes border-glow {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Glitch text effect */
+.glitch-text {
+    position: relative;
+    color: #00ff41;
+    font-size: 3em;
+    font-weight: 900;
+    text-transform: uppercase;
+    text-shadow: 
+        0 0 10px #00ff41,
+        0 0 20px #00ff41,
+        0 0 40px #00ff41;
+    animation: text-glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes text-glow {
+    from { text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 40px #00ff41; }
+    to { text-shadow: 0 0 20px #00ff41, 0 0 30px #00ff41, 0 0 50px #00ff41; }
+}
+
+.glitch-text::before,
+.glitch-text::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.glitch-text::before {
+    animation: glitch-1 0.5s infinite;
+    color: #8A2BE2;
+    z-index: -1;
+}
+
+.glitch-text::after {
+    animation: glitch-2 0.5s infinite;
+    color: #00ff41;
+    z-index: -2;
+}
+
+@keyframes glitch-1 {
+    0% { clip: rect(44px, 450px, 56px, 0); transform: translate(0); }
+    20% { clip: rect(20px, 450px, 30px, 0); transform: translate(-2px, 2px); }
+    40% { clip: rect(85px, 450px, 95px, 0); transform: translate(2px, -2px); }
+    60% { clip: rect(10px, 450px, 20px, 0); transform: translate(-1px, 1px); }
+    80% { clip: rect(60px, 450px, 70px, 0); transform: translate(1px, -1px); }
+    100% { clip: rect(44px, 450px, 56px, 0); transform: translate(0); }
+}
+
+@keyframes glitch-2 {
+    0% { clip: rect(65px, 450px, 75px, 0); transform: translate(0); }
+    20% { clip: rect(30px, 450px, 40px, 0); transform: translate(2px, -2px); }
+    40% { clip: rect(90px, 450px, 100px, 0); transform: translate(-2px, 2px); }
+    60% { clip: rect(15px, 450px, 25px, 0); transform: translate(1px, -1px); }
+    80% { clip: rect(70px, 450px, 80px, 0); transform: translate(-1px, 1px); }
+    100% { clip: rect(65px, 450px, 75px, 0); transform: translate(0); }
+}
+
+/* Cyber subtitle */
+.cyber-subtitle {
+    color: #8A2BE2;
+    font-size: 1.2em;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-shadow: 0 0 10px #8A2BE2;
+}
+
+/* Pulse line */
+.pulse-line {
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #00ff41, transparent);
+    margin: 20px 0;
+    animation: pulse-width 2s ease-in-out infinite;
+}
+
+@keyframes pulse-width {
+    0%, 100% { transform: scaleX(0.5); opacity: 0.5; }
+    50% { transform: scaleX(1); opacity: 1; }
+}
+
+/* Cyber containers */
+.cyber-container {
+    background: rgba(0, 0, 0, 0.8);
+    border: 2px solid #00ff41;
+    border-radius: 8px;
+    padding: 20px;
+    position: relative;
+    box-shadow: 
+        0 0 20px rgba(0, 255, 65, 0.3),
+        inset 0 0 20px rgba(0, 255, 65, 0.1);
+    animation: container-pulse 4s ease-in-out infinite;
+}
+
+@keyframes container-pulse {
+    0%, 100% { 
+        border-color: #00ff41;
+        box-shadow: 0 0 20px rgba(0, 255, 65, 0.3), inset 0 0 20px rgba(0, 255, 65, 0.1);
+    }
+    50% { 
+        border-color: #8A2BE2;
+        box-shadow: 0 0 30px rgba(138, 43, 226, 0.5), inset 0 0 20px rgba(138, 43, 226, 0.1);
+    }
+}
+
+/* Cyber buttons */
+.cyber-button {
+    background: linear-gradient(45deg, #00ff41, #8A2BE2);
+    border: none;
+    color: #000;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    padding: 12px 24px;
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
+}
+
+.cyber-button::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+
+.cyber-button:hover::before {
+    width: 300px;
+    height: 300px;
+}
+
+.cyber-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 30px rgba(0, 255, 65, 0.7);
+}
+
+/* Generate button special */
+.generate-button {
+    font-size: 1.2em;
+    animation: generate-pulse 2s ease-in-out infinite;
+}
+
+@keyframes generate-pulse {
+    0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.5); }
+    50% { box-shadow: 0 0 40px rgba(0, 255, 65, 0.8), 0 0 60px rgba(138, 43, 226, 0.5); }
+}
+
+/* Cyber inputs */
+.cyber-input input,
+.cyber-input textarea {
+    background: rgba(0, 0, 0, 0.9) !important;
+    border: 2px solid #00ff41 !important;
+    color: #00ff41 !important;
+    font-family: 'Orbitron', monospace !important;
+    transition: all 0.3s ease;
+}
+
+.cyber-input input:focus,
+.cyber-input textarea:focus {
+    border-color: #8A2BE2 !important;
+    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5) !important;
+    outline: none !important;
+}
+
+/* Monster display */
+.monster-display {
+    background: rgba(0, 0, 0, 0.9);
+    border: 2px solid #00ff41;
+    border-radius: 10px;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.monster-display::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
+    animation: scan-line 3s linear infinite;
+}
+
+@keyframes scan-line {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+/* Evolution display */
+.evolution-display {
+    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(0, 255, 65, 0.2));
+    border: 2px solid #8A2BE2;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 10px 0;
+    animation: evolution-glow 2s ease-in-out infinite;
+}
+
+@keyframes evolution-glow {
+    0%, 100% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); }
+    50% { box-shadow: 0 0 40px rgba(138, 43, 226, 0.8); }
+}
+
+/* Cyber dialogue */
+.cyber-dialogue {
+    font-size: 1.5em;
+    text-align: center;
+    color: #00ff41;
+    text-shadow: 0 0 10px currentColor;
+}
+
+/* Cyber stats */
+.cyber-stats {
+    font-family: 'Orbitron', monospace;
+    color: #00ff41;
+}
+
+.cyber-stats .label {
+    color: #8A2BE2;
+}
+
+/* Tab styling */
+.cyber-tabs .tab-nav {
+    background: rgba(0, 0, 0, 0.8);
+    border-bottom: 2px solid #00ff41;
+}
+
+.cyber-tabs .tab-nav button {
+    color: #00ff41 !important;
+    background: transparent !important;
+    border: none !important;
+    transition: all 0.3s ease;
+}
+
+.cyber-tabs .tab-nav button:hover {
+    background: rgba(0, 255, 65, 0.1) !important;
+    text-shadow: 0 0 10px #00ff41;
+}
+
+.cyber-tabs .tab-nav button.selected {
+    background: rgba(0, 255, 65, 0.2) !important;
+    border-bottom: 3px solid #00ff41 !important;
+}
+
+/* Loading animation */
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(0, 255, 65, 0.3);
+    border-radius: 50%;
+    border-top-color: #00ff41;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid #00ff41;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #00ff41, #8A2BE2);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #00ff41, #9932CC);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .glitch-text {
+        font-size: 2em;
+    }
+    
+    .cyber-container {
+        padding: 15px;
+    }
+    
+    .cyber-button {
+        padding: 10px 20px;
+        font-size: 0.9em;
+    }
+}
+"""