grand-snake

graph TB
    classDef frontend fill:#164E63,stroke:#22D3EE,color:#CFFAFE
    classDef backend fill:#064E3B,stroke:#34D399,color:#D1FAE5
    classDef data fill:#78350F,stroke:#FBBF24,color:#FEF3C7
    classDef infra fill:#4C1D95,stroke:#A78BFA,color:#EDE9FE
    classDef external fill:#7F1D1D,stroke:#FB7185,color:#FFE4E6

    subgraph Device["Mobile Device"]
        iOS["iOS App"]:::frontend
        Android["Android App"]:::frontend
    end

    subgraph App["React Native App"]
        RN["React Native Runtime"]:::frontend
        GameEngine["Game Engine Layer"]:::frontend
        TouchHandler["Touch Gesture Handler"]:::frontend
        ScoreTracker["Score Tracker"]:::frontend
        NeonRenderer["Neon Glow Renderer"]:::frontend
        NavigationRouter["Navigation Router"]:::frontend
    end

    subgraph Screens["Screens"]
        HomeScreen["Home Screen"]:::frontend
        GameScreen["Game Screen"]:::frontend
        GameOverScreen["Game Over Screen"]:::frontend
    end

    subgraph Backend["Backend :7011 (Optional)"]:::backend
        FastAPI["FastAPI Server"]:::backend
        ScoreAPI["Score Routes"]:::backend
        ConfigAPI["Config Routes"]:::backend
    end

    subgraph Storage["Storage"]
        MongoDB[("MongoDB")]:::data
        AsyncStorage[("AsyncStorage (Local)")]:::data
    end

    subgraph Infra["Infrastructure"]
        Docker["Docker Container"]:::infra
    end

    iOS --> RN
    Android --> RN
    RN --> NavigationRouter
    NavigationRouter --> HomeScreen
    NavigationRouter --> GameScreen
    NavigationRouter --> GameOverScreen
    GameScreen --> GameEngine
    GameScreen --> TouchHandler
    GameScreen --> ScoreTracker
    GameScreen --> NeonRenderer
    GameEngine --> ScoreTracker
    GameEngine --> NavigationRouter
    GameOverScreen --> AsyncStorage
    ScoreTracker --> AsyncStorage
    FastAPI --> ScoreAPI
    FastAPI --> ConfigAPI
    ScoreAPI --> MongoDB
    ConfigAPI --> MongoDB
    RN -.->|optional| FastAPI
    Docker --> FastAPI
    Docker --> MongoDB