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

ui/__init__.py

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

ui/interfaces.py

@@ -1,458 +0,0 @@
-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

@@ -1,428 +0,0 @@
-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;
-    }
-}
-"""